For several applications, I have utilized this jQuery code that swaps images with a smooth fading effect. It's incredibly straightforward.
$(document).ready(function() {
$("img.a").hover(
function() {
$(this).stop().animate({
"opacity": "0"
}, "fast");
}, function() {
$(this).stop().animate({
"opacity": "1"
}, "fast");
});
});
This is the HTML markup:
<div id="leftBox" class="fadehover inline">
<img src="images/leftTop.jpg" alt="" class="a" />
<img src="images/leftBot.jpg" alt="" class="b" />
</div>
CSS
/*fadeHover*/
div.fadehover {
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
I'm curious if this technique can be applied to a background image instead?
I've been attempting to implement it within the style tag without success.
Thank you