Question: I've seen some sites that use jQuery Animate to get their images to grow when moused over and shrink back to their original size when moused out. I'm trying to do this on some images but I can't quite get it right. The images are sized 60px by 60px. I went ahead and removed the flailing attempts code and have presented the initial code for assistance:
HTML:

```
<div id="icons">
    <ul>
        <li><a href="services.php"><img src="img/asdf.jpg" alt="" /></a></li>
        <li><a href="services.php"><img src="img/wasd.jpg" alt="" /></a></li>
        <li><a href="services.php"><img src="img/dsdf.jpg" alt="" /></a></li>
        <li><a href="services.php"><img src="img/wafds.jpg" alt="" /></a></li>
    </ul>
</div>

```

CSS:

```
#icons {
margin: 0 auto;
padding-top: 20px;
width: 560px;
}

#icons ul li {
display: inline;
list-style-type: none;
padding-right: 65px;
}

```

Answer: 
If I understand correctly you're taking about *zooming* in. Well, the concept behind this effect is to `position: absolute` the image in a `position: relative`, `overflow: hidden` and fixed `width` container. Then, on `hover()`, you animate the `height` and `width` of the image at the same time you animate its `left` and `top` properties by *negative half* of the position values.
here, i created a fiddle for you, to help you get started: <http://jsfiddle.net/5twM6/4/>

here is the documentation: <http://api.jquery.com/animate/>

edit: close to full solution

```
function grow(elem)
{
   elem.animate({"width" : "+=10", "height":"+=10"}, 1000);
}
function shrink(elem)
{
   elem.animate({"width" : "-=10", "height":"-=10"}, 1000);
}
$('.icons ul li img').mouseenter(function(){
   grow($(this));
}).mouseleave(function(){
   shrink($(this));
});

```

I haven't tested it though, but it should help you progress...