Today we’re going to build some simple jQuery image hover captions. These types of captions work very well in a variety of grid formats – portfolio work, feature boxes, blog displays, etc. From a UX perspective they attract user attention [with images] and then display additional content on hover. Let’s get started!

The HTML

We’ll create a standard container and then child .block divs inside. The .block divs will contain the images and child .caption divs that contain the caption content.

<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="images/image-001.jpg" />
    	<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="images/image-002.jpg" />
    	<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="images/image-003.jpg" />
    	<h4>Slide</h4>
    </div>
    <!--/.grid-block-->

</div>
<!--/.grid-container-->

The CSS

We need float the container left with a negative left margin of 30px. This allow us to float the .block divs left with a left margin of 30px to keep the grid format. We’ll also assign a height to the .block divs which is the height of the image. Note: this is ONLY needed if you have HTML below the image caption such as a title or sub paragraph.

.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: url(images/trans-black-50.png);
	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;
}

The jQuery

And finally, the finishing touches with jQuery. We’ll be using the .hover event for the hover interaction (no surprise there!), and the .find traversal to make the function global. This allows us to write one function that applies to an element with a certain class, instead of writing several functions specifically targeted at id’s. You’ll also see that I included 3 different versions – a standard hide/show, a fade in/out, and a slide down/up.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/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(250);
		},
		function(){
			$(this).find('.caption').slideUp(250);
		}
	);
});
</script>

Summary

And there you have it! A simple [and elegant] way to add hover captions to your images. I hope this taught you something new or ends up helping you with a project. Feel free to leave questions/comments below.

Discussion

17 thoughts on “jQuery Image Hover Captions”
  1. Thanks for all the love! If you guys have any suggestions on how to expand or improve these image captions please let me know 🙂

  2. I’m trying to add multiple instances of the fade object to my WordPress site and curious if you have any suggestions. I added a .js file and loading it with enqueue javascript, added css, and copied the html, but content is not showing up. The block is taking up space, but no image or caption showing up. Thoughts?

  3. Very nice – clean & clear – Superb example for all. (By adding responsive css, its become marvelous )

  4. Nice. It is still working 🙂 But I have 1 question. I added this to Toast Framework grid (showing images in 3 columns), all works fine except backgtand img (trans-black-png). It doesn’t show up on hover. Any ideas what’s causing it?

Leave a Comment

Your email address will not be published. Required fields are marked *


Ali Jafarian

Tutorial Category UI Design
Comments 17 comments

Did you find value here?

If yes, please jump on my email list for more free stuff. I'll keep bringing the heat.

Get on the List