我希望图片能够像此处展示的那样平滑地缩放。
然而我的尝试并不像上述相册中那样,图片(在我的情况下是红色方块)会跳动。这是我的代码:
section {
background-color: rgba(0, 0, 0, 0.701961);
width: 400px;
height: 400px;
}
div {
position: absolute;
top: 120px;
left: 120px;
width: 160px;
height: 160px;
background-color: red;
-webkit-transition: all .2s ease-in-out;
}
div:hover {
-webkit-transform: scale(1.8);
}
<section>
<div></div>
</section>
:hover
样式,就像我的例子一样:.banner:hover .banner__image { ... }
。而且容器具有overflow: hidden
。因此,由于图像在固定大小的容器内缩放,所以块的实际大小不会改变。我认为这可以解决“跳动”的问题。http://jsfiddle.net/sergdenisov/o1ztj3o0/ - sergdenisov