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，但我认为没有必要

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

1 个答案: