JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

<div id="contenedor">
    <div class="imagen">
        <img src="http://lorempixel.com/400/200/cats/1" />
        <img src="http://lorempixel.com/400/200/cats/2" />
    </div>
    <div class="imagen">
        <img src="http://lorempixel.com/400/200/cats/3" />
        <img src="http://lorempixel.com/400/200/cats/4" />
    </div>
    <div class="imagen">
        <img src="http://lorempixel.com/400/200/cats/5" />
        <img src="http://lorempixel.com/400/200/cats/6" />
    </div>
    <div class="imagen">
        <img src="http://lorempixel.com/400/200/cats/7" />
        <img src="http://lorempixel.com/400/200/cats/8" />
    </div>
    <div class="imagen">
        <img src="http://lorempixel.com/400/200/cats/9" />
        <img src="http://lorempixel.com/400/200/cats/10" />
    </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: 400px; height:200px; margin-left: 10px; margin-top: 10px; border:1px solid black; float:left;}
div.imagen > img {display:block; position:absolute; top: 0px; left:0px; width:400px; height:200px; transition: opacity 1s ease-in-out;}
div.imagen > img:last-child:hover { opacity: 0;}
div.clear { height: 10px; clear:both; }