JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

<div id="contenedor">
    <div class="imagen">
        <div class="flip">
            <img src="http://lorempixel.com/400/200/cats/1" />
            <img src="http://lorempixel.com/400/200/cats/2" />
        </div>
    </div>
    <div class="imagen">
        <div class="flip">
            <img src="http://lorempixel.com/400/200/cats/3" />
            <img src="http://lorempixel.com/400/200/cats/4" />
        </div>
    </div>
    <div class="imagen">
        <div class="flip">
            <img src="http://lorempixel.com/400/200/cats/5" />
            <img src="http://lorempixel.com/400/200/cats/6" />
        </div>
    </div>
    <div class="imagen">
        <div class="flip">
            <img src="http://lorempixel.com/400/200/cats/7" />
            <img src="http://lorempixel.com/400/200/cats/8" />
        </div>
    </div>
    <div class="imagen">
        <div class="flip">
            <img src="http://lorempixel.com/400/200/cats/9" />
            <img src="http://lorempixel.com/400/200/cats/10" />
        </div>
    </div>
    <div class="clear"></div>
</div>

CSS

body { background-color: #ddd }
div#contenedor { width: 834px; margin: 50px auto; background-color:white; }
div.imagen { position:relative; width: 402px; height:202px; margin-left: 10px; margin-top: 10px; float:left; }
div.flip { width: 400px; height:200px; transition: 1s; transform-style: preserve-3d; border:1px solid black;}
div.imagen img {display:block; position:absolute; top: 0px; left:0px; width:400px; height:200px; backface-visibility: hidden;}
div.imagen img:first-child { transform: rotateY(180deg);}
div.imagen img:last-child { transform: rotateY(0deg);}
div.imagen:hover .flip { transform: rotateY(180deg); }
div.clear { height: 10px; clear:both; }