CSS懸停縮放是取消隱藏溢出隱藏的內容，然後重新隱藏

我想放大鏈接的圖像並減少懸停時的不透明度。我有一個容器中的圖像，使其具有邊界半徑的圓形，並且容器已將溢出設置爲隱藏。我有一切工作，除了當我懸停時，在溢出被再次隱藏之前，完整的圖像出現一瞬間。這裏是一個codepen樣機：http://codepen.io/jphogan/pen/WbxKJG CSS懸停縮放是取消隱藏溢出隱藏的內容，然後重新隱藏

我已經嘗試了一些我在這裏找到的解決方案，包括設置圖像顯示：塊。我也嘗試設置背景顏色和溢出隱藏到容器而不是鏈接，但我有相同的結果。我試圖添加隱藏到圖像本身的溢出，儘管毫不奇怪，它什麼也沒做。我只需要在整個過渡過程中保留隱藏圖像的多餘部分。

下面是我現在設置的CSS的方式，雖然我已經通過一些迭代嘗試解決這個問題。我感謝任何幫助。謝謝！

.solutions_role_container { 
    text-align:center; 
} 

.role_img_container { 
    width: 70%; 
    margin: 0 auto; 
} 

a.solutions_role_image { 
    background:#000; 
    border-radius: 50%; 
    overflow: hidden; 
    display: block; 
    border: 1px solid #B1C3DA; 
    box-shadow: 0 4px 10px #C6C6C6; 
} 

.solutions_role_image img { 
    width:100%; 
    -moz-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out; 
    -o-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out; 
    -webkit-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out; 
    transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out; 
    display:block; 
    overflow:hidden; 
    transform:scale(1); 
} 

a.solutions_role_image:hover img { 
    opacity:0.7; 
    transform:scale(1.08); 
}

來源

2014-12-19 jphogan

添加這些規則role_img_container：

border-radius: 50%; 
overflow: hidden; 
z-index: 2; 
position: relative;

的a和img標籤應該不再需要溢出或邊界半徑任何CSS。您可以添加z-index: 1到solutions_role_img只是爲了安全，但我不認爲這是必要的

來源

2014-12-19 18:49:53

完美！謝謝。我曾嘗試過有關容器的規則，但沒有考慮Z-索引。謝謝！！ – jphogan

當然！我肯定會從圖像中刪除邊框半徑，但它似乎在邊緣周圍有點顯眼，幾乎就像它正在製作邊框一樣 –

CSS懸停縮放是取消隱藏溢出隱藏的內容，然後重新隱藏

回答

相關問題