JSFiddle - React, Tailwind, and code Playground

by takumi091111

HTML

<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<div>
  <img class="background" src="https://dl.fujifilm-x.com/global/products/lenses/xf70-300mmf45-56-r-lm-ois-wr/sample-images/xf70-300mmf45-56-r-lm-ois-wr_sample_01_hunk.jpg" />
  <div class="a-clip-image">
    <img class="a-clip-image__clip" src="https://dl.fujifilm-x.com/global/products/lenses/xf70-300mmf45-56-r-lm-ois-wr/sample-images/xf70-300mmf45-56-r-lm-ois-wr_sample_01_hunk.jpg" />
    <div class="a-clip-image__border" />
  </div>
</div>

CSS

.background {
  filter: brightness(0.5);
}

.a-clip-image__clip {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(10px 10px, 110px 10px, 110px 110px, 10px 110px);
}

.a-clip-image__border {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.5);
}