JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
  <div class="back"></div>
  <div class="front">
    <div class="img">
      <div class="inner-img"></div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  background: #bbb;
}
* {
  box-sizing: border-box;
  backface-visibility: hidden;
}

div.box {
  width: 400px;
  height: 600px;;
  /* background: red; */
  margin: 50px auto;
  position: relative;
}
div.back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: orange;
}
div.front {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://scontent.ftbs6-2.fna.fbcdn.net/v/t1.6435-9/120748268_3465169153531113_3359579121285077480_n.jpg?_nc_cat=105&ccb=1-5&_nc_sid=8bfeb9&_nc_eui2=AeE36XcVjola5p0fIqjqskrKAHX0JitHfesAdfQmK0d9606NYjpzeN1UtXRjIiJ7NwsHJlqjDlH57QT7bnVh8hFs&_nc_ohc=5Q0PKCVWBr0AX99cL7y&_nc_oc=AQn2evJ9qAPGcngtI44dPkgEa8spGs4ij6aMYF1bwOcmYCjsso5ORfZe6SA9n7IiZIY&_nc_ht=scontent.ftbs6-2.fna&oh=f539a64af645260400ccca5e473318b2&oe=6194B6B0) no-repeat;
  background-size: cover;
  transition: 1s cubic-bezier(0.92,-1.41, 0.13, 1.48);
  background-position: center;
  overflow: hidden;
}
div.front div.img {
  width: 100%;
  height: 100%;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg) no-repeat;
  background-size: cover;
  transition: 1s cubic-bezier(0.92,-1.41, 0.13, 1.48);
  background-position: center;
}
div.front div.img div.inner-img {
  width: 100%;
  height: 100%;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg) no-repeat;
  background-size: cover;
  transition: .5s cubic-bezier(0.92,-1.41, 0.13, 1.48);
  background-position: center;
}
div.front:hover {
  transform: rotate(0deg);
}
div.front div.img:hover {
  opacity: .3;
  transform: rotate(0deg) scale(1.2);
}
div.front div.img:hover div.inner-img {
  opacity: .3;
  transform: rotate(0deg) scale(1.1);
}