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

我找不到一个已经存在的问题来回答以下问题：

我已经在我的网站上添加了一个300 x 300像素的圆形png正方形图像。我使用Zurb的基础5.0.2作为CSS网格基础。< /P> 我想在圆圈周围创建一个CSS边框，并添加不透明效果，以便 仅当您将鼠标悬停在图像上方时，图像才完全可见。周围的CSS边框和背景不应受到此悬停效果的影响。请查看链接以查看图像

这是我目前的代码：

HTML:

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

当我以以下方式修改CSS时，它仅正确地将悬停效果应用于图片，但会减小图像大小，不再将其居中显示：

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

}

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

---

非常感谢。

从

#border#foto

中删除

边框

，并向其添加

溢出：隐藏

写：

#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;
}

---

添加溢出：隐藏到边框和foto div

我是这样做的：

---

这就是你想要的？

谢谢你的回复。不幸的是，仅使用您的小提琴代码，它仍然无法正确显示图片：

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

#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;
}

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

#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;
}