نوشته شده توسط
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; استفاده کنید... موفق باشید.