زوم کردن روی عکس با hover شدن روی آن

سلام
من دارم یه گالری عکس طراحی میکنم که وقتی موس روی عکس رفت روش زوم شه

واسه این کار تو hover عکس سایز رو یه کم بزرگ کردم و خوبه

مشکلش اینه که وقتی موس میره روش عکس بزرگ میشه و رو عکسای دیگه تاثیر میزاره

من میخوام تو کادر خودش بزرگ شه و اون قسمتایی که از کادر میرن بیرون دیده نشن...

مثل این : http://designshack.net/tutorialexamples/imagehovers/zoomandpan.html

لطفا راهنماییم کنید

از روی دمو کدهارو بردار و کدهای پی اچ پی و دیتابیس رو داخلش بذار

شما یک کلاس برای تگ div تعریف کن و در اون طول و عرض رو در نظر بگیر. در این صورت یک بخشی از عکس که سایزش توی اون Div جا میشه نمایش داده میشه. بعدا یک کلاس دیگه تعریف کن برای همون div ولی برای نوشتن Hover اگر اسم کلاست sample هست بنویس sample img:hover. با این دستور، Hover فقط روی عکس انجام میشه نه روی کل کادر! بعد می تونی سایز تصویر رو اونجا عوض کنی.

نقل قول:

---

نوشته شده توسط tuytoosh

سلام
من دارم یه گالری عکس طراحی میکنم که وقتی موس روی عکس رفت روش زوم شه

واسه این کار تو hover عکس سایز رو یه کم بزرگ کردم و خوبه

مشکلش اینه که وقتی موس میره روش عکس بزرگ میشه و رو عکسای دیگه تاثیر میزاره

من میخوام تو کادر خودش بزرگ شه و اون قسمتایی که از کادر میرن بیرون دیده نشن...

مثل این : http://designshack.net/tutorialexamples/imagehovers/zoomandpan.html

لطفا راهنماییم کنید

---

سلام و درود

*{padding:0; margin:0;}





body{background:#999;}





#my-div{

	margin:250px auto;

	width:200px;

	height:200px;

	border:5px solid #fff;

	overflow:hidden;	

}





#my-div img{

	transition-duration:2s;

}





#my-div img:hover{

	zoom:1.2;

	transition-duration:2s;

}

کد HTML:

---




<div id="my-div"><img src="image.jpg"  width="200"  height="200" /></div>


---

شما مانند مثال باید از overflow:hidden; استفاده کنید... موفق باشید.