Resmin Üstüne İcon Getirme

Merhaba arkadaşlar, sayfadaki resimlerin mouse ile üzerine gelince büyüt iconu gelmesini istiyorum. Sayfa sayfada resim.jpg var, mouse ile üstüne gelince resmin ortasında buyut.png iconu çıksın. bunu jqery ile nasıl yapabilirim. yardımcı olursanız sevinirim.

üst üste iki div koyun birine resimi birine büyüt iconu koyun ve margin ayarları ile üst üst getirin sonra büyüt iconu olan div e bir ID verin

jquery kodları arasında ID alın hide methodu ile gizleyin sonra öteki divi üstüne hover olayını show verin

Aşağıda bir şeyler yazdım kodu kendine göre düzenleyip istediğini yapabilirsin.

<style>
.picture {position:relative; width:150px; height:150px;}
.picture a {display:block; width:100%; height:100%;}
.picture a img {width:100%; height:100%;}
.picture a span.overlay {diplay:none; postion:absolute; left:50%; top:50%; display:block; width:48px; height:48px; margin-left:-24px; margin-top:-24px; background:url(images/zoom-icon.png) no-repeat;}
.picture a:hover span.overlay {diplay:block;}
</style>

<div class="picture">
	<a href="#">
		<img src="#" width="150" height="150" alt="" />
		<span class="overlay"></span>
	</a>
</div>