JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<script src="//sevenx.de/demo/bootstrap/thumbnail-hover-caption.html"></script>
        <div class="container">
  

			<div class="page-header">
            	<h3>4 Column Grid - SlideIn/Out</h3>
            </div>
            <ul class="thumbnails" id="hover-cap-4col">
            <li class="span3">
              <div class="thumbnail">
                <div class="caption">
                    <h4>Caption Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                    <p><a href="#" class="btn btn-inverse" rel="tooltip" title="Preview"><i class="icon-eye-open"></i></a> <a href="#" rel="tooltip" title="Visit Website" class="btn btn-inverse"><i class="icon-share"></i></a></p>
                </div>
                <img src="http://placehold.it/600x400" alt="ALT NAME">
              </div>
              <h4>Item Name</h4>
            </li>
            <li class="span3">
              <div class="thumbnail">
                <div class="caption">
                    <h4>Caption Title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                    <p><a href="#" class="btn btn-inverse" rel="tooltip" title="Preview"><i class="icon-eye-open"></i></a> <a href="#" rel="tooltip" title="Visit Website" class="btn btn-inverse"><i class="icon-share"></i></a></p>
                </div>
                <img src="http://placehold.it/600x400" alt="ALT NAME">
              </div>
              <h4>Item Name</h4>
            </li>
            <li class="span3">
              <div class="thumbnail">
               ...

CSS

#hover-cap-4col .thumbnail,
	#hover-cap-3col .thumbnail,
	#hover-cap-unique .thumbnail,
	#hover-cap-6col .thumbnail {
		position:relative;
		overflow:hidden;	
	}
	.caption {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.4);
		width: 100%;
		height: 100%;
		color:#fff !important;
	}
	.caption p {
		padding:6px;
	}

JavaScript

$("[rel='tooltip']").tooltip();	
	
	$('#hover-cap-4col .thumbnail').hover(
		function(){
			$(this).find('.caption').slideDown(250);
		},
		function(){
			$(this).find('.caption').slideUp(250);
		}
	);

	$('#hover-cap-3col .thumbnail').hover(
		function(){
			$(this).find('.caption').fadeIn(250);
		},
		function(){
			$(this).find('.caption').fadeOut(250);
		}
	);
	
	$('#hover-cap-unique .thumbnail').hover(
		function(){
			$(this).find('.caption').slideDown(500);
		},
		function(){
			$(this).find('.caption').slideUp(500);
		}
	);
	
	$('#hover-cap-6col .thumbnail').hover(
		function(){
			$(this).find('.caption').show();
		},
		function(){
			$(this).find('.caption').hide();
		}
	);