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.
Good one dkstudio.in
Great Work
Thanks admin for your hard work
Neat!
comments
Thanks for all the love! If you guys have any suggestions on how to expand or improve these image captions please let me know 🙂
wonderful
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?
Life saver!!! Thanks!
Great work, thanks
What if i want the image at the back to fade opacity as well
Very nice – clean & clear – Superb example for all. (By adding responsive css, its become marvelous )
This short post explains how to create a slide up animation for your WordPress site in seconds using a plugin. No code necessary.
http://wpvisualslideboxbuilder.com/how-to-create-a-wordpress-slide-box/
but it is not responsive.
how to make an overlay for boostrap image div ,so that it can be responsive
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?
Thanks for this!!! very clear and concise! 😀
Thank you so much!