jQuery Image Hover Captions by http://alijafarian.com/jquery-image-hover-captions/

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.