Question

我找不到可以解决以下问题的现有问题：

我在我的网站上添加了一个300 x 300像素的方形png图像。我使用Zurb的Foundation 5.0.2作为CSS网格基础。

我想在圆圈周围创建一个CSS边框并添加不透明效果当您用鼠标悬停在图像上时，图像才会完全可见。周围的CSS边框和背景不应受此悬停效果的影响。请查看链接以查看图像。

到目前为止，这是我的代码：

HTML：

<div class="large-4 columns" id="border">

            <div id="foto"><img src="/img/test.png" alt="Portrait" width="300" height="300"></div>

 </div>

CSS：

    #border #foto {
        border-radius: 50%;
        width: 300px;
        height:300px;
        background: #1ABC9C;
        border: 15px solid #34495E; 

}  

#foto:hover {
        opacity: 1.0;        
}



#foto {
        opacity:0.5;        
}

此代码正确显示圆圈周围的边框，但将悬停效果应用于边框和图像：

https://www.dropbox.com/s/2r989g7d14exyfr/screenshot1.png

当我以下列方式修改CSS时，它只是正确地将悬停效果应用于图片，但缩小了图片大小并且不再将其显示为居中：

#border {
    border-radius: 50%;
    width: 300px;
    height:300px;
    background: #1ABC9C;
    border: 15px solid #34495E;

}

https://www.dropbox.com/s/izmohri8bxkngp6/screenshot2.png?m=

您能告诉我如何正确显示图像并按预期应用悬停效果吗？

非常感谢。

Answer 1

从border移除#border #foto并向其添加overflow:hidden。

写：

#foto:hover {
    opacity: 1.0;
}
#foto {
    opacity:0.5;
}
#border {
    border-radius: 50%;
    width: 300px;
    height:300px;
    background: #1ABC9C;
    border: 15px solid #34495E;
    overflow:hidden;
}

Fiddle here.

Answer 2

添加溢出：隐藏到边框＆amp; foto div（s）。

#border #foto {
    border-radius: 50%;
    width: 300px;
    height:300px;
    background: #1ABC9C;
    border: 15px solid #34495E; 
    overflow: hidden;
}

http://jsfiddle.net/ufdM7/

Answer 3

我是这样做的：

http://jsfiddle.net/u9LrK/1/

#foto, #foto img {
    background: #1ABC9C;
    border-radius:50%;
}
#foto {
    border-radius: 50%;
    border: 15px solid #34495E; 
    height: 300px;
    width: 300px;
}
#foto:hover img {
    cursor: pointer;
    opacity: 0.5;
}

这是你想要的吗？

应用圆形CSS边框和不透明效果时图像无法正确显示

3 个答案: