I designed a div that initially displays an image, but upon hovering over it, a second div with text and a solid colored background appears to mask the original content.
To see what I'm talking about, check out my jsfiddle: 'Mask on Hover'
The code is functional, complete with smooth css transitions. However, I'm encountering an issue where both the original div and the masking div have border-radius properties. When I hover over them, the border-radius momentarily disappears and then abruptly reappears. Occasionally, there are instances where the border-radius glitch persists and remains absent while I'm still hovering.
Is there a way to prevent this from happening altogether? Perhaps a method to ensure that the content inside the div remains unaffected? I've attempted using 'overflow:none' and applying an actual 'border', but the problem persists.