Как получить граничный радиус, чтобы остаться на эффекте зависания

Question

Я создал div, который является просто изображением, но когда он завис, исходный div маскируется другим div с некоторым текстом и простым цветным фоном.

Вот что я имею в виду jsfiddle: 'Mask on Hover'

кода все, кажется, работает, в том числе некоторых интересных CSS переходов. Проблема, с которой я сталкиваюсь, заключается в том, что как исходный div, так и маска div имеют радиус границы BUT, так как я наводил на них надводный радиус, исчезает на секунду, а затем внезапно возвращается. По какой-то причине время от времени он также будет сбой и просто останется без радиуса границы, пока я паря.

Есть ли способ предотвратить это вообще? Может быть, способ сохранить содержание внутри этого div независимо от того, что? Я пробовал использовать overflow:none, а также на самом деле положить border, но это продолжается.

Answer 1

Вы также анимируете пограничный радиус. Это означает, что когда вы наводите или отключаете, граница начинается как квадрат, а затем переходит в радиус как часть анимации.

Answer 2

Вы можете сделать это с помощью родительского DIV изображения:

position: relative; 
 
z-index: 99;

Надеется, что это будет работать нормально.