将鼠标悬停在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，只是图像更易于查看。