如何让border-radius保持悬停效果

Question

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

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

代码似乎都有效，包括一些不错的css转换。我遇到的问题是原始div和mask div都有一个border-radius BUT，当我将鼠标悬停在它们上面时，border-radius会消失一秒然后突然返回。出于某种原因，在我徘徊的过程中，它偶尔会出现故障并且根本没有边界半径。

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

Answer 1

您也可以设置边框半径的动画效果。这意味着当您悬停或取消悬停时，边框将以方形开始，然后作为动画的一部分转到半径。

Answer 2

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

position: relative;
z-index: 99;

希望这会很好。