JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<div id="wrap">
 <div class="thumb"><img src="images/lowe.gif" alt="lowe" width="219" height="219" /><a  class="titlemask" href="#"><span  class="shide">Download<br/>Credentials</span></a></div>
 
 <div class="thumb"><img src="images/thumb-omo.jpg" alt="thumb-omo" width="219" height="219" /><a  class="titlemask" href="set-me-free-omo.html" target="_self"><span class="shide">Set Them Free<br/><em>Omo</em></span></a></div>
 
 <div class="thumb"><img src="images/thumb-organ-honors.jpg" alt="thumb-organ-honors" width="219" height="219" /><a  class="titlemask" href="leila-organ-donors.html" target="_self"><span class="shide">Leila<br/><em>Organ Donors</em></span></a></div> 
 
 <div class="thumb double"><img src="images/thumb-the-force.jpg" alt="thumb-the-force" width="451" height="219" /><a  class="titlemask2" href="the-force.html" target="_self"><span class="shide">The Force<br/><em>Volkswagen Passat</em></span></a></div> 
 
 <div class="thumb"><img src="images/thumb-criket.jpg" alt="thumb-criket" width="219" height="219" /><a  class="titlemask" href="cricket-ki-khushi-coca-cola.html" target="_self"><span class="shide">Cricket Ki Khushi<br/><em>Coca-Cola</em></span></a></div> 
 
 <div class="thumb"><img src="images/thumb-the-cleaner.jpg" alt="thumb-the-cleaner" width="219" height="219" /><a  class="titlemask" href="the-cleaner-axe.html" target="_self"><span class="shide">The Cleaner<br/><em>Axe</em></span></a></div>
 
 <div class="thumb"><img src="images/thumb-rivers-of-light.jpg" alt="thumb-rivers-of-light" width="219" height="219" /><a  class="titlemask" href="rivers-of-light.html" target="_self"><span class="shide">Rivers of Light<br/><em>Colombian Ministry of Defence</em></span></a></div>
 
 <div class="thumb"><img src="images/thumb-contagion.jpg" alt="thumb-contagion" width="219" height="219" /><a  class="titlemask" href="contagion-trailer.html" target="_self"><span class="shide">Contagion Trailer<br/><em>Contagion</em></span></a></div> 
 
 </div>
 <div...

CSS

A:link, A:visited, A:active {font-family: 'Avenir_light_custom',  times, serif; font-size: 14px; color:#76bbe5;}

A:hover {text-decoration: underline; color: #aad8f4;}

body {
 background:#fff;
 }
 
img {  
border-style: none;
}





#wrap {
background:#fff;
width: 705px;
margin: 36px auto;
margin-top: 72px;

}

#main {
width: 519px;
height: 291px;
margin: 0 auto;

}


.controls {
margin: 0 auto;
width: 519px;
height: 20px;
margin-top: 10px;
}

.controls p {
font-family: 'Avenir_light_custom',  times, serif;
font-size: 14px;
line-height: 16px;
color: #666;
float: left;
}


.controls a {
font-family: 'Avenir_light_custom',  times, serif;
font-size: 14px;
line-height: 16px;
float: right;
}

.thumb {
width: 219px;
height: 219px;
float: left;
margin: 6px;
position: relative;
z-index: 1;
}

.thumb.double {
width: 451px;
height: 219px;
float: left;
}



a.titlemask:link, a.titlemask:visited,  a.titlemask:active  {
position: absolute;
top:0;
left: 0;
z-index: 22;
display: block !important; 
width: 201px;
height: 201px;
padding: 9px;
color: #fff;
text-decoration: none;
font-size: 14px;
line-height: 15px;
text-transform: uppercase;

}


a.titlemask:hover {
background-color: rgba(105, 173, 222, 0.8);
}


a.titlemask2:link, a.titlemask2:visited,  a.titlemask2:active  {
position: absolute;
top:0;
left: 0;
z-index: 22;
display: block !important; 
width: 433px;
height: 201px;
padding: 9px;
color: #fff;
text-decoration: none;
font-size: 14px;
line-height: 15px;
text-transform: uppercase;

}


a.titlemask2:hover {
background-color: rgba(105, 173, 222, 0.8);
}


.titlemask span em, .titlemask2 span em {
font-size: 11px;
}

/*


.thumb a:link, .thumb a:visited,  .thumb a:active {
position: absolute;
top:0;
left: 0;
z-index: 22;
display: block;
width: 219px;
height: 219px;
background-color: green;
}

.thumb a:hover {
position: absolute;
top:0;
left: 0;
z-index: 22;
display: block;
background-color: purple;
}

*/

.titlemask span, .titlemask2 span {
display: none;
}

.footer...

JavaScript

$(function(){
     $("a.titlemask").hover(
         function() { 
        
         $(this).children('.shide').show(); 
         
         },
     
         function() { 
        
         $(this).children('.shide').hide();
         
         });
     $("a.titlemask2").hover(
     
         function() { 
        
         $(this).children('.shide').show(); 
         
         },
     
         function() { 
        
         $(this).children('.shide').hide();
         
         });
 
 });