How to make jQuery Image caption Overlay

 

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

Step 1: Prepare HTML

Create HTML code for the overlay caption in your html page.
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 in your stylesheet.

.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 from google CDN (if your site already have dont use second time)

Call jQuery library in your webpage. I am using Google CDN hosted jQuery library. (if your site already have dont use second time)

 

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

 

Step 4: Add jQuery code

you can use this into your body  after your html code

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

 

You Have  Done!!!

How to make jQuery Image caption Overlay