<div class="hole hole1">
  <img src="https://picsum.photos/300/300" width="300" height="300" alt="Sea View">
</div>
<div class="hole hole2">
  <img src="https://picsum.photos/300/300" width="300" height="300" alt="Sea View">
</div>

<div class="hole hole3">
  <img src="https://picsum.photos/300/300" width="300" height="300" alt="Sea View">
</div>

<div class="hole hole3 hole4">
  <img src="https://picsum.photos/300/300" width="300" height="300" alt="Sea View">
</div>

<div class="hole hole3 hole5">
  <img src="https://picsum.photos/300/300" width="300" height="300" alt="Sea View">
</div>
<p>(Hover the last 2 images)</p>

.hole {
  position: relative;
  display: inline-table;
  margin:10px;
}
.hole img {
  opacity: 0.5;
}
.hole:after{
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://picsum.photos/300/300) no-repeat 0 0;
  border-radius: 50%;
}

.hole2 img,.hole3 img{
	filter: blur(2px);
}

.hole3:after{
  width:100px;
  height:100px;
  margin:auto;
  background-size:300px 300px;
  background-position:50% 50%;
}
.hole4:after{
  transition:all 2s ease;
  margin:0;
  background-position:0% 0%;
}
.hole4:hover:after{
  background-position:100% 100%;
  margin:calc(100% - 100px) 0 0 calc(100% - 100px);
}

.hole5:after{
  transition:all 1s ease;
  height:0;
  width:0;
}
.hole5:hover:after{
  width:150px;
  height:150px;
}