24
Sep
2013

jQuery caption Overlay

Posted in: jQuery 2 Comments

caption-slider
In this tutorial we will create caption overlay slider using jQuery. This is very useful to show some description of any image on hover. This saves space and also looks very attractive.

Demo | Download

Step 1: Prepare HTML

Create HTML code for the overlay caption.
Note: Place an image named 1.jpg in /images folder.

<div class="box">
	<div class="caption">
		<h3>This is Image One</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo dolor in dui lacinia gravida.</p>
	</div>
	<img src="images/1.jpg" />
</div>

Step 2: Add CSS

Add CSS properties for box and caption.

.box {
	position: relative;
	float: left;
	width: 300px;
	height: 300px;
}

.caption {
	display: none;
	position: absolute;
	background: #000;
	opacity: 0.7;
	top: 0;
	left: 0;
	width: 90%;
	height: 90%;
	padding: 5%;
	color: #fff;
}

Step 3: Call jQuery Library

Call jQuery library in your webpage. I am using Google CDN hosted jQuery library.
You can use alternative method to include jQuery library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Step 4: Add jQuery code

<script type="text/javascript">
$(document).ready(function() {
$('.box').hover(function(){
		$(this).find('.caption').slideDown();
	},
	function(){
		$(this).find('.caption').slideUp();
	}
);	
});	
</script>

Done!!!

Check demo and download the demo file

Demo | Download

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati
You can skip to the end and leave a response. Pinging is currently not allowed.

2 Comments to "jQuery caption Overlay"

Add Comments (+)
  1. Pankaj says:

    Nice one

  2. ali says:

    thank you for simple and focus explain >>>

Leave a Reply