画像をズームイン＆アウトさせるjQueryプラグイン Photo Zoom Out Effect

マウスを乗せると画像がドアップに、逆にマウスオーバーが解除されるとズームアウトします。

■デモページ

■サンプルダウンロード

HTML CODE

<div class="wrap">
	<a href="http://www.flickr.com/photos/archetypefotografie/3601313864/">
		<img src="images/image1.jpg" alt="Picture 1"/>
	</a>
</div>
<div class="wrap">
	<a href="http://www.flickr.com/photos/vegaseddie/3910559910/">
		<img src="images/image2.jpg" alt="Picture 2"/>
	</a>
</div>
<div class="wrap">
	<a href="http://www.flickr.com/photos/62337512@N00/445175934/">
		<img src="images/image3.jpg" alt="Picture 3"/>
	</a>
</div>
<div class="wrap">
	<a href="http://www.flickr.com/photos/brunociampi/2461177417/">
		<img src="images/image4.jpg" alt="Picture 4"/>
	</a>
</div>
<div class="wrap">
	<a href="http://www.flickr.com/photos/beadmobile/3298460491/">
		<img src="images/image5.jpg" alt="Picture 5"/>
	</a>
</div>
<div class="wrap">
	<a href="http://www.flickr.com/photos/tonythemisfit/3839281139/">
		<img src="images/image6.jpg" alt="Picture 6"/>
	</a>
</div>

CSS CODE

.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;

}

JAVASCRIPT CODE

$(function() {

	$('#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'

				});

		}

	);

});