JSFiddle - React, Tailwind, and code Playground

by tlgreg

HTML

<div class="anim">
    <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>
</div>

CSS

.anim {
    width: 233px;
    height: 139px;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
}

.anim .tile, .anim .var {
    position: absolute;
    top: 0%;
    left: 0%;
}

.anim .tile {
    -webkit-transform: perspective(300) rotateY(20deg) scale(0.8);
            transform: perspective(300) rotateY(20deg) scale(0.8);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    
    -webkit-transition: all 0.5s ease-in-out 0.1s;
            transition: all 0.5s ease-in-out 0.1s;
}

.anim:hover .tile {
    -webkit-transform: perspective(300) rotateY(0deg);
            transform: perspective(300) rotateY(0deg);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    
    -webkit-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
}

.anim .var {
    opacity: 0;
    
    -webkit-transition: opacity 0.1s linear;
            transition: opacity 0.1s linear;
}

.anim:hover .var {
    opacity: 1;
    
    -webkit-transition: opacity 0.3s linear 0.5s;
            transition: opacity 0.3s linear 0.5s;
}