I implemented a jQuery hover effect on my image gallery where the images have a default size of 265 x 172 and are displayed horizontally. My goal is to have the images swap out for larger ones sized at 449 x 223 when a user hovers over them. However, I want this change to appear subtle, without any noticeable transitions.
Currently, when hovering over an image, the default image slides down while the larger one slides up, which is not what I want. I only want the image to increase in size without any sliding effects.
You can view my code example here: http://jsfiddle.net/g5a2T/8/
Here's the jQuery code:
jQuery('.carousel-img').hover(function() {
jQuery(this).css('width', '449px');
jQuery(this).children('.defaultImg').stop().hide("fast");
jQuery(this).children('.largeImg').stop().show("slow");
}, function() {
jQuery(this).css('width', '265px');
jQuery(this).children('.largeImg').stop().hide("fast");
jQuery(this).children('.defaultImg').stop().show("slow");
});
This is how the HTML code looks like:
<ul id="carousel">
<li class="carousel-img" style="width: 265px;">
<img class="defaultImg" src="design-engine-blue.jpg " style="display: inline-block; height: 172px; padding: 0px; margin: 0px; width: 265px; opacity: 1;">
<img class="largeImg" src="design-engine.jpg" style="display: none; height: 223px; padding: 0px; margin: 0px; width: 449px; opacity: 1;">
</li>
<li class="carousel-img" style="width: 265px;">
<img class="defaultImg" src="design-engine-blue.jpg " style="display: inline-block; height: 172px; padding: 0px; margin: 0px; width: 265px; opacity: 1;">
<img class="largeImg" src="design-engine.jpg" style="display: none; height: 223px; padding: 0px; margin: 0px; width: 449px; opacity: 1;">
</li>
</ul>
And this is the corresponding CSS:
#carousel {
color: #FFFFFF;
list-style: none outside none;
margin: 0 auto;
max-width: 980px;
text-transform: uppercase;
}
#carousel li {
float: left;
height: 223px;
line-height: 1.7em;
position: relative;
width: 265px;
}
#carousel li img {
bottom: 0;
left: 0;
position: absolute;
vertical-align: bottom;
}