All geek questions in one place

Interactive area of ​​related images with rounded corners

I create this little widget: http://codepen.io/JonnyNineToes/pen/zGYxwV

This is basically an image that you can click and get more information about the image "slip" because of it.

The problem I am facing is the interactive area of ​​the widget with click / freeze / interactivity. Even though I used the border radius, I still get a square shape for a click around the widget. (Mouse over where the corners of the box should be.)

I have identified the source of the problem as the image element itself. If I remove the image element, I will no longer have this problem.

I already found this ... Why is the margin area of ​​my image link available? I removed the "display: block"; the rule is from the image class, and I still have a problem with this “ghost region”.

I am not sure what is happening with this element. These are the only styles applied to it (".profile" is the image class):

.profile, .description { position: absolute; border-radius: 150px; width: 300px; height: 300px; } .profile { left: 0; top: 0; z-index: 2; }

EDIT: I also played with overflow: hidden; as several threads were suggested, but that didn't help either.

EDIT 2: Found:

+6
source share
1 answer

The solution that seems to work for Chrome (Firefox 37 seems to work as expected) is to use another element with a set of background images. Everything else is the same. Of course, you lose the alt attribute. If the image you are using is more than aesthetically pleasing, you should find a way to use this information in a different way or stick to the <img /> .

 <span style="background: url('http://i.imgur.com/BfLc7dD.jpg')" class="profile">

Codepen Example

+2
source

Source: https://habr.com/ru/post/985636/

More articles:


All Articles