JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="img-hover">
   <li><a href=""><img src="https://source.unsplash.com/random/300×300"></a></li>
   <li><a href=""><img src="https://source.unsplash.com/random/300×300"></a></li>
   <li><a href=""><img src="https://source.unsplash.com/random/300×300"></a></li>
   <li><a href=""><img src="https://source.unsplash.com/random/300×300"></a></li>
   <li><a href=""><img src="https://source.unsplash.com/random/300×300"></a></li>
   <li><a href=""><img src="https://source.unsplash.com/random/300×300"></a></li>
</ul>

SCSS

.img-hover {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  margin: 20px;
  img {
    width: 100%;
    vertical-align: top;
  }
}
a {position: relative; display: block;}
a::after { 
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
}

.img-hover:hover li:not(:hover) a::after {
  background: rgba(0,0,0,.5);
}