JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div class="container"><div class="numberContainer"><div class="cover"></div><p class="number">1</p></div>
<div class="numberContainer"><div class="cover"></div><p class="number">2</p></div>
<div class="numberContainer"><div class="cover"></div><p class="number">3</p></div>
</div>

CSS

.container{position:relative;}
.numberContainer{position:relative;width:150px; height:150px;}
.number{text-align:center;display:none;margin:0;padding:40px;width:140px;height:100px;position:absolute;}
.cover{background:url(http://www.placehold.it/140x100);background-repeat:no-repeat;width:140px;height:100px;cursor:pointer;margin:10px;position:absolute;}

JavaScript

$(document).ready(function(){
    $(".cover").on("click",function(){
        $(this).fadeOut(1000).next("p").fadeIn(1000);
    });
});