如何在懸停時放大div？

我有一個水平行包含圖像&我試圖實現這一Netflix的使用當圖像正在被懸停，如圖這個視頻相同的縮放效果：如何在懸停時放大div？

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展現我的全部代碼

來源

2016-03-14 John Jackson

將懸停動畫應用於父級容器的相同比例，並根據需要調整父級的比例。您可以在子處理程序內設置父動畫。 – Korgrue

這並不能提供我想要的效果。我在視頻鏈接之後的問題中解釋了期望的效果。你能幫我實現嗎？ @Korgrue –

在演示mov。他們將父母div設置得比兒童的最大縮放高度高。父div也被設置爲overflow：可見，所以它不會在孩子展開時切斷它們的邊。給那一槍。 – Korgrue

你應該能夠做到這一點使用：懸停

.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的工作，只是圖像更容易看到。

來源

2016-03-14 22:39:31

這並不能提供我想要的效果。我在視頻鏈接之後的問題中解釋了期望的效果。你能幫我實現嗎？ –

我已經更新了我的答案，我認爲它更符合你原來的要求。你應該可以通過動畫擴展CSS來做更有趣的事情 –

如何在懸停時放大div？

回答

相關問題