[英]CSS3 zoom animation with overflow hidden
我希望在悬停时放大图像,但要隐藏溢出包含 div 的图像的所有溢出。 因此,溢出容器外的图像的任何部分都被隐藏了。
#portfolioWrapper img{
width: 100%;
opacity: 1;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
#portfolioWrapper img:hover{
opacity: .7;
-webkit-transform: scale(1.05,1.07);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1.05,1.07);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
position: relative;
z-index: 99;
overflow: hidden;
}
JSFiddle - http://jsfiddle.net/Md49g/ (放大到虚线边框外的任何图像被隐藏
您需要设置overflow: hidden;
在容器本身上,而不是图像上。
#portfolioWrapper{
width:400px;
border: 3px dotted green;
overflow: hidden;
}
首先用容器包装你的图像,在下面的介绍图像框是容器。
<div class="intro-image-box">
<img src="./resources/img/intro-office.jpg" alt="Intor office Image">
</div>
现在在你的 CSS 文件中
.intro-image-box{
width: 100%;
height: auto;
border-radius: 1%;
overflow: hidden;
}
.intro-image-box img{
width: 100%;
height: auto;
border-radius: 1%;
transform: scale(1.0);
transition: transform 0.2s;
}
.intro-image-box img:hover {
transform: scale(1.15);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.