JSFiddle - React, Tailwind, and code Playground

by Taufik Nurrohman

HTML

<div class="demo">
   <div class="demohover">
       <h2>Pure CSS3 Design Akiyama Mio</h2>
       <p>
           Lorem ipsum dolor sit amet-amet jabang bayi oek-oek.
       </p>
   </div>
   <img src="http://1.bp.blogspot.com/-giOs6z0cz48/TyojXSh7v8I/AAAAAAAACDE/a24OqigS3-8/s1600/Screenshot-1.png" alt="image" />
</div>

<div class="demo">
   <div class="demohover">
       <h2>Pure CSS3 Design Akiyama Mio</h2>
       <p>
           Lorem ipsum dolor sit amet-amet jabang bayi oek-oek.
       </p>
   </div>
    <img src="http://1.bp.blogspot.com/-giOs6z0cz48/TyojXSh7v8I/AAAAAAAACDE/a24OqigS3-8/s1600/Screenshot-1.png" alt="image" />
</div>

<div class="demo">
   <div class="demohover">
       <h2>Pure CSS3 Design Akiyama Mio</h2>
       <p>
           Lorem ipsum dolor sit amet-amet jabang bayi oek-oek.
       </p>
   </div>
    <img src="http://1.bp.blogspot.com/-giOs6z0cz48/TyojXSh7v8I/AAAAAAAACDE/a24OqigS3-8/s1600/Screenshot-1.png" alt="image" />
</div>

<div class="demo">
   <div class="demohover">
       <h2>Pure CSS3 Design Akiyama Mio</h2>
       <p>
           Lorem ipsum dolor sit amet-amet jabang bayi oek-oek.
       </p>
   </div>
    <img src="http://1.bp.blogspot.com/-giOs6z0cz48/TyojXSh7v8I/AAAAAAAACDE/a24OqigS3-8/s1600/Screenshot-1.png" alt="image" />
</div>

<div class="demo">
   <div class="demohover">
       <h2>Pure CSS3 Design Akiyama Mio</h2>
       <p>
           Lorem ipsum dolor sit amet-amet jabang bayi oek-oek.
       </p>
   </div>
    <img src="http://1.bp.blogspot.com/-giOs6z0cz48/TyojXSh7v8I/AAAAAAAACDE/a24OqigS3-8/s1600/Screenshot-1.png" alt="image" />
</div>

<div class="demo">
    <div class="demohover">
        <h2>Pure CSS3 Design Akiyama Mio</h2>
        <p>
            Lorem ipsum dolor sit amet-amet jabang bayi oek-oek.
        </p>
    </div>
     <img src="http://1.bp.blogspot.com/-giOs6z0cz48/TyojXSh7v8I/AAAAAAAACDE/a24OqigS3-8/s1600/Screenshot-1.png" alt="image" />
 </div>

CSS

body {background-color:#eee;font:normal 11px Verdana,Arial,Sans-Serif;}

.demo {
 position:relative;
 float:left;
 width:180px;
 height:128px;
 margin:10px;
 background-color:white;
 border:1px solid #ddd;
 -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
 -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.2); 
 box-shadow:0px 1px 2px rgba(0,0,0,0.2);    
}

.demo img {
 width:160px;
 height:auto !important;
 position:absolute;
 top:10px;
 left:10px;
 z-index:2;    
}

.demo .demohover {
 width:190px;
 height:auto;
 background-color:white;
 -webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.2);
 -moz-box-shadow:0px 1px 5px rgba(0,0,0,0.2);
 box-shadow:0px 1px 5px rgba(0,0,0,0.2);
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px;
 position:absolute;
 top:-5px;
 left:-5px;
 display:none;
}

.demo .demohover h2 {
 font:normal 16px Impact,Arial,Sans-Serif;
 color:#222;
 margin:128px 10px 5px;
 text-transform:uppercase;
}

.demo .demohover p {
 margin:0px 10px 10px;   
}

JavaScript

// MDN Thumbnail Hover

$(function() {
    $('div.demo').hover(function() {
       $(this).css('z-index', 10).find('div.demohover').delay(600).fadeIn('fast'); 
    }, function() {
        $(this).find('div.demohover').fadeOut('fast', function() {
            $(this).parent().css('z-index', 1);
        }); 
    });
});