jQuery: Highlight image on hover

To use jQuery on our web page firstly we need to add jQuery library. We can download it from internet or  can also add it from direct using following url

Step 1: Add following script to the head section:

   <script type="text/javascript">
$(document).ready(function(){
$("img.fade").hover(
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "0.3"}, "slow");
});

});
</script>

Step 2: Create a class in the head section:

     <style type="text/css">
img.fade
{
filter:alpha(opacity=30);
opacity:0.3;
}
</style>

Step 3: Now write down following HTML code in the body section and change image url:
     <img src="images/womens/0.jpg" alt="image1" border="0" class="fade" />

jQuery Initials

Using jQuery attribute filters

jQuery Essential Training | by Joe Marini

View this entire jQuery Essential Training course and more in the lynda.com Online Training Library®.