如何让边界半径保持悬停效果

Question

我创建了一个只是图像的 div，但是当悬停时，原始 div 被另一个带有一些文本和纯色背景的 div 掩盖。

这就是我在 jsfiddle 中的意思：'Mask on Hover'

代码似乎都可以正常工作，包括一些不错的 css 转换。我遇到的问题是原始 div 和蒙版 div 都有一个边界半径，但是当我将鼠标悬停在它们上面时，边界半径消失了一秒钟然后突然返回。出于某种原因，它有时也会出现故障，并且在我悬停时完全没有边界半径。

有什么办法可以防止这种情况发生吗？也许一种无论如何都可以将内容保留在该 div 中的方法？我尝试过使用overflow:none 以及实际使用border，但它继续发生。

Answer 1

您也在为边界半径设置动画。这意味着当您悬停或取消悬停时，边框从正方形开始，然后作为动画的一部分进入半径。

Answer 2

您可以使用图像的父 div 执行此操作：

position: relative;
z-index: 99;

希望一切顺利。