The idea is to create a zoom effect on mouseover. But since the height is 'auto' the zoomed in image doesn't contain in the div and increases in height. I have to keep the height 'auto' for responsive design purpose. A way out would be appreciated. Following is the link: http://jsfiddle.net/nitish_8/zaeZ4/
<div class="item">
<img src="images/2.jpg" />
</div>
<div class="item">
<img src="images/2.jpg" />
</div>
<div class="item">
<img src="images/2.jpg" />
</div>
<div class="item">
<img src="images/2.jpg" />
</div>
try out following code for item div hover, hope this will help you
.item:hover img {
-webkit-transition: all 21s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: al 1s ease-in-out;
transition: all 1s ease-in-out;
transform: scale(1.1) ;
-webkit-transform:scale(1.1) ;
-moz-transform: scale(1.1) ;
-o-transform: scale(1.1) ;
-ms-transform: scale(1.1) ;
}
我认为您可以从item
类中删除ovewflow
属性,以使div
不剪切放大的图像
code from TalkersCode.com here is a complete tutorial http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php
.item img
{
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
width:250px;
height:220px;
}
.item:hover img
{
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.