JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="foo"><img src="https://placeimg.com/640/320/any" alt=""></div>
<div class="foo"><img src="https://placeimg.com/640/320/any" alt=""></div>
<div class="foo"><img src="https://placeimg.com/640/320/any" alt=""></div>
<div class="foo"><img src="https://placeimg.com/640/320/any" alt=""></div>

SCSS

.foo {
      width: 640px;
    height: 320px;
    overflow: hidden;  
    img {
        transition: all 400ms ease;
    }
}
.foo:hover {
    box-shadow: inset 0 0 0 20px tomato;
    
    img {
        transform: scale(1.1);
        position: relative;
        z-index: -1;
    }
}