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

[tuytoosh]

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

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

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

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

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

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

[نیلوفر66]

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

[satrap92]

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

[130000]

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

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

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

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

مثل این : http://designshack.net/tutorialexamples/imagehovers/zoomandpan.html (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;
}










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





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