JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<div class="add-perspective">
  <div class="themesthumbs">
    <div class="column">
      <div class="thumb">
        <img src="https://webthemez.com/wp-content/uploads/2017/11/loud-business-html5-responsive-website-template-1.jpg" alt="">
      </div>
    </div>
    <div class="column">
      <div class="thumb">
        <img src="https://i.imgur.com/nyy8nGW.jpg" alt="">
      </div>
    </div>
    <div class="column">
      <div class="thumb clear"></div>
      <div class="thumb">
        <img src="https://static.wixstatic.com/media/09e926b98b2149c7ba461062b8a64f47.jpg" alt="">
      </div>
      <div class="thumb">
        <img src="https://gridgum.com/wp-content/uploads/edd/2016/07/taxi-service-website-template.jpg" alt="">
      </div>
      <div class="thumb">
        <img src="https://i.imgur.com/rkvaSQi.png" alt="">
      </div>
    </div>
  </div>
</div>

CSS

body{
  height:1000px;
}
.themesthumbs{
  margin:130px auto;
  width:530px;
  height:300px;
  font-size:0;
  transform: skewX(-20deg) skewY(20deg) rotateY(-30deg) rotateX(40deg);
}
.themesthumbs .column{
  display:inline-block;
  vertical-align:top;
}

.thumb{
  margin:10px;
  margin-bottom:10px;
  width:150px;
  -webkit-box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.4);
  box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.4);
  transition-duration:0.3s;
}
.thumb:hover{
  transform: skewX(30deg) skewY(-20deg) rotateY(-15deg) rotateX(-30deg) scale(2.5)
}

.thumb img{
  width:100%;
  height:auto;
}
.thumb.clear{
  opacity:0;
}

JavaScript

------------------ clica em result Î