6

I'm building this little widget: http://codepen.io/JonnyNineToes/pen/zGYxwV

It's basically an image that you can click, and have extra info about the image "slide out" from behind it.

The problem I'm having is with the clickable/hoverable/interactive area of the widget. Even though I've used border-radius, I'm still getting a square-shaped clickable area around the widget. (Hover your mouse where the corners of the box should be.)

I've determined the source of the problem to be the with the image element itself. If I remove the image element, I no longer have this problem.

I already found this... Why is the margin space of my image link clickable? I removed the "display: block;" rule from the class of the image, and I still have the problem with this "ghost area".

I'm not sure what's going on with this element. These are the only styles applied to it (".profile" is the class of the image):

.profile, .description {
  position: absolute;
  border-radius: 150px;
  width: 300px;
  height: 300px;
}

.profile {
  left: 0;
  top: 0;
  z-index: 2;
}

EDIT: I've also toyed around with "overflow: hidden;" as some Stack Overflow threads suggested, but this hasn't helped either.

EDIT 2: Found these:

Community
  • 1
  • 1
  • Works for me in Firefox, but not Chrome. A possible work around would be to make the image a background of an element instead of an image. – Matthew Rapati Apr 21 '15 at 20:27

1 Answers1

1

A solution that seems to work for Chrome (Firefox 37 seems to work as expected) is to use another element with a background image set. Everything else is the same. Of course you lose the alt attribute. If the image you're using is more than aesthetic, then you should find a way to serve that information another way, or stick to the <img /> tag.

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

Codepen Example

Matthew Rapati
  • 5,648
  • 4
  • 28
  • 48