Hover Fading Button With Jquery

Hover Fading Button With Jquery Web-development (jquery) Hover Fading Button With Jquery Hover Fading button with jQuery

Demo

<style>
a img {
border: 0;
}
ul#img_hover {
list-style: none;
margin: 0 auto; padding: 0;
}
ul#img_hover li {
float: left;
text-align: center;
display: inline;
}
ul#img_hover li a.thumb {
width: 305px;
height: 71px;
cursor: pointer;
}

ul#img_hover li span {
width: 305px;
height: 71px;
overflow: hidden;
display: block;
}

ul#img_hover li a {
text-decoration: none;
display: block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("ul#img_hover li").hover(function() { //On hover...
var thumbOver = jQuery(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
//Set a background image(thumbOver) on the <a> tag
jQuery(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
//Fade the image to 0
jQuery(this).find("span").stop().fadeTo('normal', 0 , function() {
 jQuery(this).hide() //Hide the image after fade
});
} , function() { //on hover out...
//Fade the image to 1
jQuery(this).find("span").stop().fadeTo('normal', 1).show();
});
});

</script>
<ul>
<li>
<a href="http://r-ednalan.blogspot.com/">
 <span><img src="images/button.png"/></span>
</a>
</li>
</ul>

Posted by Hodie J