JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<div class="grid-block-container">
 
    <div class="grid-block standard">
    	<div class="caption">
            <h3>Caption Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p><a href="#" class="learn-more">Learn more</a></p>
        </div>
    	<img src="http://placehold.it/300x200/" />
    	<h4>Normal</h4>
    </div>
    <!--/.grid-block-->
 
    <div class="grid-block fade">
    	<div class="caption">
            <h3>Caption Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p><a href="#" class="learn-more">Learn more</a></p>
        </div>
    	<img src="http://placehold.it/300x200/" />
    	<h4>Fade</h4>
    </div>
    <!--/.grid-block-->
 
    <div class="grid-block slide">
    	<div class="caption">
            <h3>Caption Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p><a href="#" class="learn-more">Learn more</a></p>
        </div>
    	<img src="http://placehold.it/300x200/" />
    	<h4>Slide</h4>
    </div>
    <!--/.grid-block-->
 
</div>

CSS

.grid-block-container {
	float: left;
	width: 990px;
	margin: 20px 0 0 -30px;
}
.grid-block {
	position: relative;
	float: left;
	width: 300px;
	height: 200px;
	margin: 0 0 30px 30px;
}
.grid-block h4 {
	font-size: .9em;
	color: #333;
	background: #f5f5f5;
	margin: 0;
	padding: 10px;
	border: 1px solid #ddd;
}
 
.caption {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
    background-color: rgba(0,0,0, 0.8);
	width: 100%;
	height: 100%;
}
.caption h3, .caption p {
	color: #fff;
	margin: 20px;
}
.caption h3 {
	margin: 20px 20px 10px;
}
.caption p {
	font-size: .75em;
	line-height: 1.5em;
	margin: 0 20px 15px;
}
.caption a.learn-more {
	padding: 5px 10px;
	background: #08c;
	color: #fff;
	border-radius: 2px;
	-moz-border-radius: 2px;
	font-weight: bold;
	text-decoration: none;
}
.caption a.learn-more:hover {
	background: #fff;
	color: #08c;
}

JavaScript

$(document).ready(function() {
	$('.standard').hover(
		function(){
			$(this).find('.caption').show();
		},
		function(){
			$(this).find('.caption').hide();
		}
	);
	$('.fade').hover(
		function(){
			$(this).find('.caption').fadeIn(250);
		},
		function(){
			$(this).find('.caption').fadeOut(250);
		}
	);
	$('.slide').hover(
		function(){
			$(this).find('.caption').slideDown(400);
		},
		function(){
			$(this).find('.caption').slideUp(250);
		}
	);
});