<div class="img-wrapper">
  <img class="img" src="https://picsum.photos/1200/1000?image=5" alt="">

  <div class="img-layer"></div>

  <img class="img img--highlight" src="https://picsum.photos/1200/1000?image=5" alt="">
</div>
.img-wrapper {
  display: grid;
  max-width: 600px;
  margin: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.img {
  width: 100%;
  grid-area: 1 / 1;
}
.img--highlight {
  clip-path: circle(100px at 55% 65%);
}
@media (min-width: 480px) {
  .img--highlight {
    clip-path: circle(100px at 50% 65%);
  }
}

.img-layer {
  background: rgba(0, 0, 0, 0.7);
  grid-area: 1 / 1;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.