html - 具有多个图像的胡佛缩放效果并保持图像尺寸

Question

我正在尝试使用多个图像制作悬停缩放效果:

• 图片位于页面中央
• 放大时保持尺寸
• 图像宽度在 img 标签内联设置

到目前为止，这是我尝试过的:

.img-zoom {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.img-zoom img {
-webkit-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
margin: 0px 20px;
}
.img-zoom img:hover {
-webkit-transform: scale(1.21);
-ms-transform: scale(1.21);
transform: scale(1.21);
}

<div style="text-align: center;padding: 5px;">
    <div class="img-zoom">
        <img src="http://lorempixel.com/600/210" width="300" />
        <img src="http://lorempixel.com/600/210" width="300"/>
    </div>
</div>

...但是图像在鼠标悬停时会扩展。

Answer 1

听起来您希望图像在不改变宽度/高度的情况下放大。我稍微修改了您的 HTML 并将内联 width 参数放在 .img-zoom 元素上。我认为这可以满足您的需求。

.img-zoom {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.img-zoom img {
  display: block;
  width: 100%;
  transition: 0.4s ease;
  transform-origin: 50% 50%; /* center zoom */
}
.img-zoom img:hover {
  transform: scale(1.21);
}

<div style="padding: 5px; text-align: center;">
  <div class="img-zoom" style="width: 300px;">
    <img src="http://lorempixel.com/600/210" />
  </div>
  <div class="img-zoom" style="width: 300px;">
    <img src="http://lorempixel.com/600/210"/>
  </div>
</div>