JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<section id="boxes">

<section class="thumb" id="thumb1">
<a href="#">
<img src="http://kuzya.com/_img/logo/logo.png">
<div class="box">
    <div class="text">
        lorem ipsum dolor
    </div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="http://kuzya.com/_img/logo/logo.png">
<div class="box">
    <div class="text">
        sit amet elit
    </div>
</div>
</a>
</section>


<section class="thumb">
<a href="#">
<img src="http://kuzya.com/_img/logo/logo.png">
<div class="box">
    <div class="text">
        metus id augue 
    </div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="http://kuzya.com/_img/logo/logo.png">
<div class="box">
    <div class="text">
        ultrices sit amet
    </div>
</div>
</a>
</section>

</section>

CSS

/*=========================================
    Thumbnails
=========================================*/
#boxes {
width: 100%;
margin: 0 auto;
margin-top: 13px;
}

.thumb {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
margin: 13px;
float: left;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
-webkit-box-shadow: 0px 0px 3px 6px #333333;
-moz-box-shadow: 0px 0px 3px 6px #333333;
box-shadow: 0px 0px 6px 3px #555555;
}

.thumb:active {
-webkit-box-shadow: 0px 0px 3px 6px #ffffff;
-moz-box-shadow: 0px 0px 3px 6px #ffffff;
box-shadow: 0px 0px 6px 3px #999999;
}

.thumb img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
position: absolute;
width: 200px;
height: 200px;
}

.box {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
opacity: 0.95;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
position: absolute;
width: 198px;
height: 198px;
border: 1px solid #e3e3e3;
background: #f3f3f3;
}

.thumb:hover .box{
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
opacity: 0;
}

/*=========================================
    Thumbnail text
=========================================*/

.text {
padding-top: 42px;
width: 180px;
padding-left: 10px;
padding-right: 10px;
font-family: 'Arial';
color: #333;
font-size: 22px;
line-height: 24px;
}