JSFiddle - React, Tailwind, and code Playground

by stovberpv

HTML

<div class='items--container'>
  <div class='item--wrapper'>
    <img class='item--image' src='https://images.unsplash.com/photo-1533610067042-1cee3c403282?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c88cc6f793037105a55ab791546044e1&auto=format&fit=crop&w=1950&q=80'>
  </div>
  <div class='item--wrapper'>
    <img class='item--image' src='https://images.unsplash.com/photo-1540270776932-e72e7c2d11cd?ixlib=rb-0.3.5&s=ec5d6ccec099e7cd20232a0c78e9f1fa&auto=format&fit=crop&w=1951&q=80'>
  </div>
  <div class='item--wrapper'>
    <img class='item--image' src='https://images.unsplash.com/photo-1540303795566-d6d68e274b74?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c8e5abacf3e15e5f6ae36c1ae021758d&auto=format&fit=crop&w=1950&q=80'>
  </div>
  <div class='item--wrapper'>
    <img class='item--image' src='https://images.unsplash.com/photo-1532779952550-b8fc9200ed8c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e68b851dfc59bc0a2dfd66a6f0d7f577&auto=format&fit=crop&w=1951&q=80'>
  </div>
  <div class='item--wrapper'>
    <img class='item--image' src='https://images.unsplash.com/photo-1539511977266-f0b884a7ee39?ixlib=rb-0.3.5&s=f03fbb383b41b66e7b154829a5b6e353&auto=format&fit=crop&w=2089&q=80'>
  </div>
  <div class='item--wrapper'>
    <img class='item--image' src='https://images.unsplash.com/photo-1535732820275-9ffd998cac22?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d942e76c1b524992ec82d6a0c3384477&auto=format&fit=crop&w=1950&q=80'>
  </div>
</div>

CSS

.items--container {
  width: 900px;
  font-size: 0;
  height: 600px;
}

.item--wrapper {
  width: 300px;
  height: 300px;
  display: inline-block;
  overflow: hidden;
}

.item--image {
  display: block;
  width: 300px;
  height: 300px;
  object-fit: cover;
  transform: scale(1.1);
  transition: all .7s;
}

.item--wrapper:hover .item--image {
  transform: scale(2) rotate(15deg);
}