JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
<div class="border-layer">
</div>
<div class="box"> 
   <img id="img_loop" src=" http://fc07.deviantart.net/fs71/f/2012/144/b/6/barn_owl_leather_mask_by_teonova_by_teonova-d50xl3v.jpg">
</div>
</div>

CSS

.wrap {
   width:210px;
   height:210px;
}
.border-layer {
    position: absolute;
    top: 0;
    left: 0;
    width:204px;
    height:204px;
    background: none;
    border-radius:50%;
    border:3px solid yellow;
    z-index: 10;
}

.box { 
    position: relative;
    top:0;
    left:0;
    width:210px;
    height:210px;
    border-radius:50%;
    cursor: default;
    overflow: hidden;
    -webkit-transform: translateZ(0); 
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  }

#img_loop {
     width:210px;
     height:210px;
     display: block;
      position: relative;
     -webkit-transition: all 0.6s ease-in-out;
     -moz-transition: all 0.6s ease-in-out;
     -o-transition: all 0.6s ease-in-out;
     -ms-transition: all 0.6s ease-in-out;
     transition: all 0.6s ease-in-out;
    }

.wrap:hover img{
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  }