JSFiddle - React, Tailwind, and code Playground

by sazakharov

HTML

<div class="gallery">
  <div class="gallery__wrapper">
    <div class="gallery__el">
      <img src="https://placeimg.com/640/480/any" alt="">
    </div>
    <div class="gallery__el">
      <img src="https://placeimg.com/640/680/any" alt="">
    </div>
    <div class="gallery__el">
      <img src="https://placeimg.com/640/580/any" alt="">
    </div>
    <div class="gallery__el">
      <img src="https://placeimg.com/640/500/any" alt="">
    </div>
    <div class="gallery__el">
      <img src="https://placeimg.com/640/400/any" alt="">
    </div>
  </div>
</div>

CSS

*,
:before,
:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.gallery {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}

.gallery__wrapper {
  perspective: 1200px;
  display: flex;
  margin: 0 -10px;
  transition: transform .3s cubic-bezier(.79, .14, .15, .86);
}

.gallery__el {
  flex: 0 0;
  flex-basis: calc(25% - 20px);
  margin: 0 10px;
  position: relative;
  background-color: #333;
  transition: transform .6s cubic-bezier(.79, .14, .15, .86), opacity .6s;
}

.gallery__el:nth-child(5) {
  opacity: 0;
  transform: rotateY(-80deg) scale(.75);
}

.gallery__el:before {
  content: '';
  display: block;
  padding-bottom: 75%;
}

.gallery__el img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery:hover .gallery__wrapper {
  transform: translateX(-25%);
}

.gallery:hover .gallery__el:nth-child(5) {
  opacity: 1;
  transform: none;
}