JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

.box { 
    width:210px;
    height:210px;
    border-radius:50%;
    border:3px solid yellow;
    cursor: default;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
  }

#img_loop{
    overflow: hidden;
     width:210px;
     height:210px;
     z-index:-1;
     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;
    }

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