CSS Hover Scaling暂时取消隐藏溢出隐藏内容然后重新隐藏

Question

我正在尝试扩展链接的图像并减少悬停时的不透明度.我将图像放在一个容器中,使其成为一个带有border-radius的圆圈,并且容器的溢出设置为隐藏.我有一切工作,除了当我悬停时,在再次隐藏溢出之前,整个图像会显示一小段时间.这是一个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确保安全,但我认为没有必要