JSFiddle - React, Tailwind, and code Playground

HTML

Use case: hovering each square will show a different image covering the whole container. A cool and useful idea to showcase different image in a fancy mannger and easily scalable

<div class="container">
  <div><img src="https://picsum.photos/id/1069/800/800"></div>
  <div><img src="https://picsum.photos/id/1012/800/800"></div>
  <div><img src="https://picsum.photos/id/106/800/800"></div>
  <div><img src="https://picsum.photos/id/107/800/800"></div>
  <div><img src="https://picsum.photos/id/1023/800/800"></div>
  <div><img src="https://picsum.photos/id/1075/800/800"></div>
  <div><img src="https://picsum.photos/id/1082/800/800"></div>
  <div><img src="https://picsum.photos/id/11/800/800"></div>
  <div><img src="https://picsum.photos/id/17/800/800"></div>
</div>

CSS

.container {
  display:grid;
  height:300px;
  width:300px;
  border:2px solid;
  grid-template-columns:repeat(3,1fr);
  position:relative;
  z-index:0;
  counter-reset:num;
}

.container div {
    outline:1px solid;
    cursor:pointer;
    font-size:40px;
    font-weight:bold;
}
.container div::before {
  content:counter(num);
  counter-increment:num;
}
.container div img {
  position:absolute;
  z-index:-1;
  left:0;
  top:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:0.5s;
}
.container div:hover img {
  opacity:1;
}
.container div:hover {
  color:red;
}