JSFiddle - React, Tailwind, and code Playground

by tejeskifly

HTML

<div class="tile">
    <img src="http://utazzlastminute.tripbook.hu/PICS/MAIN/miskolc.png" width="233" height="139" />
</div>
<div class="var">
    <img src="http://utazzlastminute.tripbook.hu/PICS/MAIN/miskolconmouse.png" width="233" height="139" />
</div>

CSS

.tile {
    width:233px;
    height:139px;
    position:absolute;
    left:0px;
    top:0px;
    outline: 1px solid transparent;
    z-index:1;
    -webkit-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -ms-transition: all ease-in-out 0.5s;
    -o-transition: all ease-in-out 0.5s;
    transition: all ease-in-out 0.5s;
    -webkit-transform: perspective(300) rotateY(20deg) scale(0.8);
    transform: perspective(300px) rotateY(20deg) scale(0.8);
    -webkit-transform-origin: 50px 0px;
    transform-origin: 50px 0px;
}
.tile:hover {
    width:233px;
    height:139px;
    position:absolute;
    left:0px;
    top:0px;
    outline: 1px solid transparent;
    z-index:1;
    -webkit-transform: perspective(300) rotateY(0deg);
    transform: perspective(300px) rotateY(0deg);
}
.var {
    width:233px;
    height:139px;
    position:absolute;
    left:0px;
    top:0px;
    visibility: visible;
    opacity: 0;
    transition: visibility 0s 0s, opacity 0.1s linear;
}
.var:hover {
    width:233px;
    height:139px;
    position:absolute;
    left:0px;
    top:0px;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s linear;
}