如何在将鼠标悬停在 div 上时放大它？

Question

我有一个包含图像的水平行，并且我正在尝试实现与 netflix 在图像悬停时使用的相同缩放效果，如下视频所示：

https://s3.amazonaws.com/whatever12345/net.mov

我观察到，在悬停时，当图像被缩放时，它会在 x 轴上将其兄弟姐妹推一段距离，但是当悬停结束时，它们都会返回到原点位置。我还观察到，缩放后的图像只是与其容器以及顶部和底部的元素重叠，而不是干扰边距和填充。如何重新创建此操作？

这是我尝试使用的 css 和 jQuery，但这不是我想要实现的：

.cover-item {
  position: relative;
  display: inline-block;
  width: 136px;
  height: 178px;
  vertical-align: bottom;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;

  -webkit-transition: 400ms;
  transition: 400ms;
}

.cover-item-open {
  transform: scale(1.1);
  z-index: 2;
}

 $('.image-container a').hover(function() {
   $(this).find('.cover-item').toggleClass('cover-item-open');
 });

我创建了这个JSFiddle 来显示我的完整代码

Answer 1

你应该可以使用 :hover 来做到这一点

.my_div:hover {
    transform: scale(...);
}

编辑：进一步观察，这应该会更好

$(document).ready(function () {
    $(document).on("mouseenter", ".scalable", function () {
        $(this).animate({ width: "100px" });
    });
    $(document).on("mouseout", ".scalable", function () {
        $(this).animate({ width: "50px" });
    });
});

和 HTML：

<img class="scalable" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Earth_Western_Hemisphere_transparent_background.png/600px-Earth_Western_Hemisphere_transparent_background.png" alt="earth">
<img class="scalable" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Earth_Western_Hemisphere_transparent_background.png/600px-Earth_Western_Hemisphere_transparent_background.png" alt="earth">

同样的基本理念也适用于 div，只是图像更易于查看。