在懸停在隱藏父項中的懸停上顯示縮放效果

當我將鼠標懸停在每個元素上時，我使用內容滑塊（縮略圖滑塊），我想縮放它（使其更大），並且通過父項的隱藏溢出防止縮放，基本上它是這樣的在懸停在隱藏父項中的懸停上顯示縮放效果

.parent { 
    overflow hidden 
} 
.child:hover { 
    transform: scale(1.2); 
}

這裏是滑塊本身

http://codepen.io/nadeemkhedr/pen/OXkKxa?editors=1100

來源

2016-07-26 Nadeem Khedr

您應該刪除overflow：hidden。溢流容器無法達到這樣的效果。 – 3rdthemagical

@滑蓋本身需要隱藏第三個外形的溢出來隱藏溢出的幻燈片 –

我對你有壞消息。 – 3rdthemagical

的codepen如果我的理解是正確的，你想縮放後的子元素會比父母更大。如果是這樣的情況下，這裏是JSfidlle與解決方案：

https://jsfiddle.net/7vd6fhfo/3/

，代碼：

HTML

<div class="parent"> 
    <div class="child"> 

    </div> 
</div>

CSS

.parent{ 
    width:200px; 
    height:200px; 
    background-color:green; 
    overflow:hidden; 
} 
.child{ 
    width:190px; 
    height:190px; 
    background-color:red; 
    position:absolute; 
} 
.child:hover{ 
    transform: scale(1.2); 
}

來源

2016-07-26 09:06:19 Tezekiel

但是父級已溢出：隱藏。 – 3rdthemagical

編輯我的回答 – Tezekiel

好的。嘗試添加一些孩子。要將絕對位置設置爲小孩，您必須添加相對於父項的位置。而這段代碼不起作用。在容器外面顯示溢出的東西是不可能的：隱藏的。 – 3rdthemagical

請通過下方碼。

.item { float:left; position: relative; border: 1px solid #333; 
 
    overflow: hidden; width: 350px;} 
 
.item img {width: 100%; display:table-cell; 
 
    -moz-transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 
.item:hover img { 
 
    -moz-transform: scale(1.4); 
 
    -webkit-transform: scale(1.4); 
 
    transform: scale(1.4); 
 
}

<div class="item"> 
 
    <img src="http://www.dike.lib.ia.us/images/sample-1.jpg/image" alt="image" width="100%" > 
 
</div>

希望你喜歡它。

來源

2016-07-26 09:31:41

我想img擴展到容器外部 –

那麼你只能刪除溢出：從類.item隱藏 –

在懸停在隱藏父項中的懸停上顯示縮放效果

回答

相關問題