JSFiddle - React, Tailwind, and code Playground
HTML
<div class="anim">
<div class="tile">
<img src="http://utazzlastminute.tripbook.hu/PICS/MAIN/pointer.png" width="233" height="139" />
<div class="varos">MISKOLC</div>
<div class="cim">Dózsa György út 11.</div>
</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 {
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;
}
.anim:hover .tile {
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);
}
.anim .var {
opacity: 0;
-webkit-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
z-index: -1;
}
.anim:hover .var {
opacity: 1;
-webkit-transition: opacity 0.3s linear 0.4s;
transition: opacity 0.3s linear 0.4s;
z-index -1;
}
.varos {
font-size: 16px;
color: #F00;
font-family:"Arial Black", Gadget, sans-serif;
position: absolute;
top: 85px;
left: 90px;
}
.cim {
font-size: 12px;
color: #999;
font-family:"Arial Black", Gadget, sans-serif;
position: absolute;
top: 105px;
left: 90px;
}