I'm currently working on a unique widget that can be found at this link: http://codepen.io/JonnyNineToes/pen/zGYxwV
This widget features an image that reveals additional information when clicked, with the extra info sliding out from behind the image.
However, I've encountered an issue with the clickable/hoverable area of the widget. Despite using border-radius, there appears to be a square-shaped clickable region around the widget. (Hover your mouse near the corners of the box to see what I mean.)
The problem seems to originate from the image element itself. When I remove the image element, the issue disappears.
Even after trying to address it by removing the "display: block;" rule from the image's class as suggested in this post: Why is the margin space of my image link clickable? I still encounter this unwanted "ghost area".
I am puzzled about this element, and these are the only styles applied to it (the image has the ".profile" class):
.profile, .description {
position: absolute;
border-radius: 150px;
width: 300px;
height: 300px;
}
.profile {
left: 0;
top: 0;
z-index: 2;
}
UPDATE: I have also experimented with "overflow: hidden;" based on suggestions from various Stack Overflow discussions, but this hasn't resolved the issue.
UPDATE 2: Came across these threads while trying to troubleshoot:
- Should border-radius clip the content?
- How do I prevent an image from overflowing a rounded corner box with CSS3?
- CSS3 border-radius clipping issues