I am trying to create a rollover effect that displays text when the user hovers over an image. Despite researching numerous tutorials, I have found limited resources on incorporating text or captions using jQuery. Most of the available tutorials focus on CSS3 rather than just jQuery. Below is my attempt at implementing this feature:
jQuery
// The code below waits for all images to be loaded before executing
$(window).load(function(){
// Loop through each description div...
$('div.description').each(function(){
//...set the opacity to 0...
$(this).css('opacity', 0);
//..set width same as the image...
$(this).css('width', $(this).siblings('img').width());
//...get the parent (the wrapper) and set its width same as the image width... '
$(this).parent().css('width', $(this).siblings('img').width());
//...set the display to block
$(this).css('display', 'block');
});
$('div.wrapper').hover(function(){
// When mouse hovers over the wrapper div
// retrieve children elements with class description and show them using fadeTo
$(this).children('.description').stop().fadeTo(500, 0.7);
},function(){
// When mouse exits the wrapper div
// use fadeTo to hide the div
$(this).children('.description').stop().fadeTo(500, 0);
});
});
Here is the corresponding HTML...
HTML
<table id="intro">
<tr>
<div class="wrapper">
<td>
<a href="headwear.html"><img src="images/headwear.png" alt="headwear" /></a>
<div class="description">
<div class="description_content">
This is just a test.
</div>
</div>
<a href="apparel.html"><img src="images/apparel.png" alt="apparel" /></a>
<a href="accessories.html"><img src="images/accessories.png" alt="accessories" /></a>
</td>
</div>
</tr>
</table>
This is how the styles are configured...
CSS
div.description{
position: absolute; /* absolute position (so we can position it where we want)*/
bottom: 0px; /* position will be on bottom */
left: 0px;
display: none; /* hide it */
/* styling below */
background-color: black;
font-size: 15px;
color: white;
}
div.description_content{
padding: 10px;
}
div.wrapper{
position: relative; /* important(so we can absolutely position the description div */
}
#intro {
text-align: left;
margin-right: 5px;
width: 1100px;
}
#intro img {
margin: 5px;
}
Fiddle
http://fiddle.jshell.net/yutikohercell/brxu8w8m/
Live