JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div class="content-box-wrap">
    <div class="content-box">
        <a href="#">					
            <img src="http://i49.tinypic.com/3326q0i.jpg" alt="" class="main-img" />
            <div class="overlay"><p> My Img </p></div>	
            <span class="product_overlay"> Click here to ... </span>
        </a>		
    </div>	
    <span class="text"> Some text underneath </span>
</div>					
			
<div class="content-box-wrap">
    <div class="content-box">
        <a href="#"> 
            <img src="http://i49.tinypic.com/3326q0i.jpg" alt="" class="main-img" />
            <div class="overlay"><p> My Img </p></div>	
            <span class="product_overlay"> Click here to ... </span>
        </a> 				
    </div>	
    <span class="text"> Some text underneath </span>
</div>

<div class="content-box-wrap omega">
    <div class="content-box">
        <a href="#"> 
            <img src="http://i49.tinypic.com/3326q0i.jpg" alt="" class="main-img" />
            <div class="overlay"><p> My Img </p></div>	
            <span class="product_overlay"> Click here to ... </span>
        </a> 				
    </div>	  
    <span class="text"> Some text underneath </span>
</div>

CSS

html, body, div, img, a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}

.content-box-wrap {
    position:relative; 
    float:left; 
    margin-right:5%; 
    width:30%;
}

.omega {
    margin-right:0;
}

.content-box { 	
    position:relative;				
    float:left;
    width:100%;
    background:#f9f9f9;	
    overflow:hidden;	
    z-index:1000;
}		

.content-box-wrap .overlay {	
    position:absolute;	
    margin-left:0px;
    padding:0;
    bottom:0px;			
    background:#83aec3;		
    height:50px;	
    width:100%;
    text-align:center;
    color:black;				
}

.product_overlay {
    position:absolute;
    top:30%;
    text-align:center;
    color:white;					
    padding:5%;				
    background:#23CDD5;
    display:none;
    width:100%;
    height:30px;
    z-index:2;   
}

.content-box a img.main-img { 
    width:100%; 
    border:0px white solid; 
    height:200px; 
}

.bw {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter : grayscale(100%);
}

JavaScript

$(function() {
    $('.content-box-wrap').not('.text').hover(function() {
        $('.main-img, .overlay', $(this)).addClass('bw');       
        //hidden overlay
        $poverlay = $(this).find('.product_overlay');
        $poverlay.stop().show(200);        
    }, function() {		
        $poverlay.slideUp(400, function() {
            //slideup finished  
            $(this).siblings().removeClass('bw');          
        });
    });	 
});