CSS 悬停缩放是短暂取消隐藏溢出隐藏的内容，然后重新隐藏

Question

我正在尝试放大链接的图像并降低悬停时的不透明度。我将图像放在容器中，使其成为具有边框半径的圆，并且容器已将溢出设置为隐藏。我一切正常，除了当我悬停时，完整图像会出现一秒钟，然后溢出再次隐藏。这是一个代码笔模型：http://codepen.io/jphogan/pen/WbxKJG

我已经尝试了我在这里找到的一些解决方案，包括将图像设置为 display：block。我还尝试将背景颜色和溢出隐藏到容器而不是链接，但我得到了相同的结果。我尝试将溢出隐藏添加到图像本身，尽管毫不奇怪，这没有任何作用。我只需要多余的图像在整个过渡过程中保持隐藏。

这是我现在设置的 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);
}

Answer 1

将这些规则添加到role_img_container：

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

a和img标记不再需要任何 css 来表示溢出或边框半径。 为了安全起见，您可以在solutions_role_img中添加z-index: 1，但我认为没有必要