Css边框悬停图像效果答案

【问题标题】：Css Border hover image effectCss边框悬停图像效果
【发布时间】：2016-02-24 13:27:41
【问题描述】：

我正在尝试在 wordpress 主题中的图像上方应用悬停效果。效果应该显示一个边框和一个带有文本的背景。问题是边框比图像更宽更高，我不明白为什么。我尝试了许多解决方案，但结果始终相同：边框仅出现在我的顶部和左侧。我要疯了……

这是我页面上的链接：

http://boscolo.dm-cloud.net/

有什么建议吗？

提前致谢，弗朗切斯科

【问题讨论】：

快速猜测是你的图像比你周围的 div 大，而且这个 div 有固定的尺寸？尝试溢出：隐藏在您周围的 div 上。

标签： html css hover border css-transitions

【解决方案1】：

添加此代码

.topImage2 .bordo {
    border: 0 solid #fff;
    box-sizing: border-box;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 78;
}

您只需将box-sizing: border-box; 添加到.topImage2 .bordo

【讨论】：

是的！你说得对！非常感谢，我必须学习很多关于 css 的东西 :)