放大時包含圖像

我在一行中有三個圖像。他們放大鼠標懸停。問題是，當它們擴大時，它們會交叉進入周圍的元素。我的jsfiddle在這裏。紅色邊框表示整個容器，黑色邊框表示單個圖像容器。所以我想要做的是放大鼠標懸停的每個圖像，但放大不應該超出黑色邊框。我已經找到了解決方案和我發現說使用溢出的解決方案：隱藏，但似乎沒有什麼區別。請有人指出錯誤？放大時包含圖像

.container {height:40px;border:1px solid red} 
    .nav {margin:0; padding-top:5px;overflow:hidden} 
    .nav-items {border:1px solid black} 
    #set2 {margin-left:0px; display:inline-block} 
    #set2:hover { 
     -webkit-animation: enlarge 5s; 
     animation: enlarge 2s 1 forwards; 
    } 
    @-webkit-keyframes enlarge { 
     100% { 
     -webkit-transform: scale(1.5); 
     transform: scale(2.1); 
     } 
    } 


    <div class="banner_set"> 
    <div class="container"> 
     <ul class="nav"> 
     <li id="set2" class="nav-items"><a href="example.com"><img src="example1.jpg"></a></li> 
     <li id="set2" class="nav-items"><a href="example.com"><img src="example2.jpg"></a></li> 
     <li id="set2" class="nav-items"><a href="example.com"><img src="example3.jpg"></a></li> 
     </ul> 
     </div> 
    </div>

來源

2017-09-04 user3052443

？您的本地路徑不起作用。 – monners

首先，你使用重複的ID（你不應該這樣做）。

其次，你縮放容器，而不是圖像。更新您的樣式，以便：

.nav-items {margin-left:0px; display:inline-block; overflow: hidden;} 
.nav-items:hover img { 
    -webkit-animation: enlarge 5s; 
    animation: enlarge 2s 1 forwards; 
}

這樣你的容器保持相同的大小，隱藏溢出，但你能縮放懸停。

這裏，您可以對工作圖像更新您的提琴更新fiddle

來源

2017-09-04 02:06:52 monners

@ user3052443這是否解決了您的問題？ – monners

放大時包含圖像

回答

相關問題