CSS Hover Scaling 会暂时取消 overflow hidden 隐藏内容，然后重新隐藏

Question

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

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

这是我现在设置的 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 来实现溢出或边框半径。为了安全起见，您可以将 z-index: 1 添加到 solutions_role_img，但我认为没有必要