• HTML
• CSS
• JS

HTML

<div class="container">
    <img src="img1.jpg" class="img">
    <img src="img2.jpg" class="img">
    <img src="img3.jpg" class="img">
    <img src="img4.jpg" class="img">
    <img src="img5.jpg" class="img">
    <img src="img6.jpg" class="img">
</div>

CSS

*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#1a252c;
}
.container
{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    transform-style:preserve-3d;
}
.container .img
{
    position:relative;
    width:120px;
    height:120px;
    transition:0.5s;
    transform-origin:bottom center;
    -webkit-box-reflect:below 1px linear-gradient(transparent,#0002);
}
.container .img.hovered
{
    transform:perspective(500px) rotateY(0deg) scale(1.5);
    z-index:10000;
}
.container .img.prev
{
    margin:0 -20px;
    transform:perspective(500px) rotateY(45deg) scale(0.95);
}
.container .img.next
{
    margin:0 -20px;
    transform:perspective(500px) rotateY(-45deg) scale(0.95);
}

JS

document.querySelectorAll('img').forEach((box,index,boxes) => {
    
    box.addEventListener('mouseover',() => {
        boxes.forEach((b,i) => {
            let className = i < index ? 'prev' : i === index ? 'hovered' : 'next';
            b.classList.remove('prev','next','hovered');
            b.classList.add(className);
        })        
    })
    
    box.addEventListener('mouseleave',() => {
        boxes.forEach((b) => b.classList.remove('prev','next','hovered'));
    })
    
})

/*
 Al the credits to: https://www.youtube.com/watch?v=gRKUG5PBuow
*/