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

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

将 overflow:hidden 添加到您的边框和照片 div(s)。

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

http://jsfiddle.net/ufdM7/