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
No comments:
Post a Comment