Zoom in / Zoom out effect

by hellosze

HTML

<div id="container">
<div class="wrap">
    <a href="http://www.flickr.com/photos/archetypefotografie/3601313864/">
        <img src="http://www.fpoimg.com/500x500" alt="Picture 1"/>
    </a>
</div>
<div class="wrap">
    <a href="http://www.flickr.com/photos/vegaseddie/3910559910/">
        <img src="http://www.fpoimg.com/500x500" alt="Picture 2"/>
    </a>
</div>
<div class="wrap">
    <a href="http://www.flickr.com/photos/62337512@N00/445175934/">
        <img src="http://www.fpoimg.com/500x500" alt="Picture 3"/>
    </a>
</div>
<div class="wrap">
    <a href="http://www.flickr.com/photos/brunociampi/2461177417/">
        <img src="http://www.fpoimg.com/500x500" alt="Picture 4"/>
    </a>
</div>
<div class="wrap">
    <a href="http://www.flickr.com/photos/beadmobile/3298460491/">
        <img src="http://www.fpoimg.com/500x500" alt="Picture 5"/>
    </a>
</div>
<div class="wrap">
    <a href="http://www.flickr.com/photos/tonythemisfit/3839281139/">
        <img src="http://www.fpoimg.com/500x500" alt="Picture 6"/>
    </a>
</div>
</div>
<div class="clearfix"></div>
<h1>Mouseover to zoom in</h1>
<a href="http://tympanus.net/codrops/2010/03/07/photo-zoom-out-effect-with-jquery/">
    http://tympanus.net/codrops/2010/03/07/photo-zoom-out-effect-with-jquery/
</a>

CSS

.wrap{
    width:200px;
    height:200px;
    margin:0px;
    overflow:hidden;
    position:relative;
    float:left;
}
.wrap a img{
    border:none;
    position:absolute;
    top:-66.5px;
    left:-150px;
    height:500px;
    opacity: 0.5;
}
.clearfix { clear: both; }

JavaScript

$('#container img').hover(
    function(){
        var $this = $(this);
        $this.stop().animate({
                'opacity':'1.0',
                'height':'200px',
                'top':'0px',
                'left':'0px'
            });
    },
    function(){
        var $this = $(this);
        $this.stop().animate({
            'opacity':'0.5',
            'height':'500px',
            'top':'-66.5px',
            'left':'-150px'
            });
    }
);