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

我正在尝试放大链接图像并降低悬停时的不透明度。我有一个容器中的图像，使其成为一个具有边界半径的圆，容器的溢出设置为隐藏。我的一切工作，除了当我悬停，完整的形象出现了短暂的一秒钟之前，溢出再次隐藏。这是一个代码笔模型：

我在这里尝试了一些解决方案，包括将图像设置为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);
}

---

将以下规则添加到角色\u img\u容器：

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

---

a

和

img

标记应该不再需要任何css用于溢出或边界半径。为了安全起见，您可以将

z-index:1

添加到

solutions\u role\u img

中，但我认为这并不是必需的

完美！谢谢我曾在容器上尝试过这些规则，但甚至没有考虑z索引。谢谢当然我肯定会从图像中删除边界半径，但它似乎有点明显的边缘周围，几乎就像它是一个边界