JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-block">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
<div class="img4"></div>
<div class="img5"></div>

<div class="image_1"><img src="https://potolkismart.ru/images/faktur.jpg"></div>
<div class="image_2"><img src="https://potolkismart.ru/images/faktur2.jpg" class="image_2"></div>
<div class="image_3"><img src="https://potolkismart.ru/images/pic.jpg" class="image_3"></div>
<div class="image_4"><img src="https://potolkismart.ru/images/vid.jpg" class="image_4"></div>
<div class="image_5"><img src="https://potolkismart.ru/images/vid2.jpg" class="image_5"></div>

</div>

CSS

.image-block{
position:relative;
width:473.33px;
height:249.11px;
}
.image-block img{
width:100%;
height:249.11px;
}

.image-block:hover::before{
  position:absolute;
  content:"";
  width:100%;
  height:3px;
  background:gray;
  z-index: 2;
}
.image_1,
.image_2,
.image_3,
.image_4,
.image_5{
position:absolute;
width:100%;
height:249.11px;
}

.image_1{
z-index:1;
}
.image_2{
z-index:0;
}
.image_3{
z-index:0;
}
.image_4{
z-index:0;
}
.image_5{
z-index:0;
}
.img1:hover::before,
.img2:hover::before,
.img3:hover::before,
.img4:hover::before,
.img5:hover::before{
position:absolute;
content:"";
width:100%;
height:3px;
background:blue;
}
.img1,
.img2,
.img3,
.img4,
.img5{
position:absolute;
top:0;
width:94.666px;
height:100%;
z-index:2;
}
.img1{
left:0;
}
.img2{
left:94.666px;
}
.img3{
left:189.332px;
}
.img4{
left:283.998px;
}
.img5{
left:378.664px;
}
.img1:hover,
.img2:hover,
.img3:hover,
.img4:hover,
.img5:hover{
cursor:pointer;
}
.img1:hover ~ .image_1{
z-index:1!important;
}
.img2:hover ~ .image_2{
z-index:1!important;
}
.img3:hover ~ .image_3{
z-index:1!important;
}
.img4:hover ~ .image_4{
z-index:1!important;
}
.img5:hover ~ .image_5{
z-index:1!important;
}