JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<div class="tiles">
  <div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div>
</div>

CSS

.tiles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tile {
  position: relative;
  float: left;
  width: 33.333%;
  height: 100%;
  overflow: hidden;
}

.photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform .5s ease-out;
}