Hey, all.
I’m trying to build an image gallery which uses a floated list of nine images in a presized rectangle, then expands each one individually to fill the rectangle on-hover. What I’ve got so far is this:
<head>
<style type="text/css">
/*styles for gallery; left-floated list of images*/
#image_gallery { width: 750px; height: 525px; margin: 20px auto; }
#image_gallery ul { float: left;list-style: none;margin: 0; padding: 0; width: 756px; position: relative;}
#image_gallery ul li {margin: 0; padding: 0; float: left; position: relative;width: 250px; height: 175px;}
#image_gallery ul li img { border: none; margin: 0; padding: 0; width: 250px; height: 175px; -ms-interpolation-mode: bicubic; border: 1px solid #054066; background: #f0f0f0; position: absolute; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="image_gallery">
<ul>
<li><img src="http://www.placekitten.com/250/175" alt="" class="gallery_img" /></li>
<li><img src="http://www.placekitten.com/250/175" alt="" class="gallery_img" /></li>
<li><img src="http://www.placekitten.com/250/175" alt="" class="gallery_img" /></li>
<li><img src="http://www.placekitten.com/250/175" alt="" class="gallery_img" /></li>
<li><img src="http://www.placekitten.com/250/175" alt="" class="gallery_img" /></li>
<li><img src="http://www.placekitten.com/250/175" alt="" class="gallery_img" /></li>
<li><img src="http://www.placekitten.com/250/175" alt="" class="gallery_img" /></li>
<li><img src="http://www.placekitten.com/250/175" alt="" class="gallery_img" /></li>
<li><img src="http://www.placekitten.com/250/175" alt="" class="gallery_img" /></li>
</ul>
</div>
<div class="clear"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//on hover over any li
$("#image_gallery ul li").hover(function() {
$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
//stop all currently active animations and...
$(this).find('img').stop()
//animate the hovered li, resizing and (theoretically) moving to cover the whole div
.animate({
top: '0',
left: '0',
width: '750px', /* Set new width */
height: '525px', /* Set new height */
}, 200);
} , function() {
//on mouse-out, undo everything listed above
$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).find('img').stop()
.animate({
top: 'auto',
left: 'auto',
width: '250px', /* Set width back to default */
height: '175px', /* Set height back to default */
}, 400);
});
});
</script>
</body>
</html>
This almost does what I want, but not quite; the images scale up and stay on top of each other properly but because of the organization of relative and absolute positioning needed to keep them all arranged in the first place, they don’t fill up the whole div but just kind of sit where they are.
Does anyone know a way to make this work so that they fill the div properly without falling out of it?
Thanks!