Question

我有一个包含图像的水平行＆amp;我试图实现netflix在图像悬停时使用的相同缩放效果，如本视频所示：

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

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

这是css＆amp;我试图使用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，只是图像更容易看到。

如何在悬停在它上方时放大div？

1 个答案: