I'm working on a code snippet to increase the size of an image when hovered over:
$(".myImage").hover(function () {
$(this).find('img').stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
width: '560px', /* Set new width */
height: '174px', /* Set new height */
padding: '20px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
}, function () {
$(this).find('img').stop() /* Remove the "hover" class , then stop animation queue buildup*/
.animate({
width: '140px', /* Set width back to default */
height: '44px', /* Set height back to default */
padding: '5px'
}, 400);
});
However, I ran into an issue where the enlarged image appears behind another image that serves as the background. The CSS for this background image is:
.otherImage {
background: url("/Content/Images/main1.png") repeat scroll 0 0 transparent;
display: block;
height: 506px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
position: relative;
width: 527px;
z-index: 0;
}
Is there a way for me to make the image being animated hover over this background image?
Below is the original CSS of the image that triggers the animation (as shown in Firebug):
element.style {
display: inline-block;
height: 44px;
left: 0;
margin-left: 0;
margin-top: 0;
padding: 5px;
top: 0;
width: 140px;
}
.myImage img {
height: 44px;
width: 140px;
z-index: 999;
}
a img {
border: medium none;
}