將鼠標懸停在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，只是圖像更易於查看。