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>

SCSS

$turn-degree: 20deg;
$scale-down: 0.8;
$tile-in: 0.5s;
$tile-out: $tile-in;
$var-in: 0.3s;
$var-out: 0.1s;

@mixin 3dtrans($rotate: 0deg, $scale: 1, $origin-x: 50%, $origin-y: 50%, $perspective: 300) {
    -webkit-transform: perspective($perspective) rotateY($rotate) scale($scale);
            transform: perspective($perspective) rotateY($rotate) scale($scale);
    -webkit-transform-origin: $origin-x $origin-y;
            transform-origin: $origin-x $origin-y;
}

@mixin animate($property: all, $duration: 1s, $ease: linear, $delay: 0s) {
    -webkit-transition: $property $duration $ease $delay;
            transition: $property $duration $ease $delay;
}

@mixin turn($degree: 0deg, $scaling: 1, $duration: 1s, $delay: 0s, $ease: ease-in-out, $perspective: 300) {
    @include 3dtrans($degree, $scaling, 0%, 0%, $perspective);
    @include animate(all, $duration, $ease, $delay);
}

@mixin fade($from: 0, $duration: 1s, $delay: 0s, $ease: linear) {
    opacity: $from;
    
    @include animate(opacity, $duration, $ease, $delay);
}

.anim {
    width: 233px;
    height: 139px;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    
    .tile, .var {
        position: absolute;
        top: 0%;
        left: 0%;
    }
    
    .tile {
        @include turn($turn-degree, $scale-down, $tile-out, $var-out);
    }
    
    &:hover .tile {
        @include turn(0deg, 1, $tile-in);
    }
        
    .var {
        @include fade(0, $var-out);
    }
    
    &:hover .var {
        @include fade(1, $var-in, $tile-in);
    }
}