JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <svg class="img1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="600">
  <defs>
    <filter id="filter">
      <feGaussianBlur stdDeviation="25"/>
    </filter>
    <mask id="mask">
      <ellipse cx="50%" cy="50%" fill="white" filter="url(#filter)"></ellipse>
    </mask>
  </defs>
  
  <image xlink:href="https://images.unsplash.com/photo-1504677559991-c1df82825899?w=900&h=600&fit=crop" width="100%" height="100%" mask="url(#mask)"></image>
</svg>
</div>

CSS

.container {
  background-image: url('https://images.unsplash.com/photo-1519817914152-22d216bb9170?w=900&h=600&fit=crop');
  background-size: cover;
  width: 900px;
  height: 600px;
}

.img1 ellipse {
  rx: 0%;
  ry: 0%;
  transition: all 1.5s;
}

.img1:hover ellipse {
  rx: 100%;
  ry: 100%;
}