Transparent png button hover without background

Question

I have 40*40px png with transparent background with a 30*30px circle in the middle.

I would like to use that png as a button with a simple hover effect, but i want the hover effect to take place only when the cursor is actually on the circle, not on the transparent background.

Is there a plain HTML+CSS solution for this? I tried to check it here and on other forums, but I didn't find anything.

Same kind of answer here http://stackoverflow.com/questions/2689308/hover-only-on-non-transparent-part-of-image — Mat Richardson, Feb 20 '13 at 22:35
Wouldn't be easier (and more natural) to crop the image and add a margin with CSS? — leonbloy, Feb 20 '13 at 23:12
Possible duplicate of [How to make it so that Hovering Over Transparency in a PNG doesn't count as hovering?](http://stackoverflow.com/questions/21564447/how-to-make-it-so-that-hovering-over-transparency-in-a-png-doesnt-count-as-hove) — KyleMit, Nov 03 '16 at 13:18

zxqx · Answer 1 · 2013-02-20T22:51:11.147

3

Yes, you can do this with HTML and CSS. First create a circle element and place it before your image. Then wrap both your image and the circle in a container, like this:

<div class="container">
  <div class="circle"></div>
  <img src="your-image.jpg" />
</div>

Then, use position: absolute to position the circle on top of the image (align it with the circle that's in the image), and use the + selector to select the next adjacent element when the circle is hovered.

.container {
  position: relative;
}
.circle {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #222;
}
.circle:hover+img {
  border: 5px solid aqua;
}

See DEMO.

edited Feb 20 '13 at 22:51

answered Feb 20 '13 at 22:33

zxqx

5,115
2
20
28

Works for me in Chrome, but the hover area is about 15px bigger than the circle. – Diodeus - James MacFarlane Feb 20 '13 at 22:36
It seems to work, but if you use the dev tools the div is still square, not circular. – Mat Richardson Feb 20 '13 at 22:37
Yeah, WebKit browsers seem to treat all shapes created with CSS as squares when hovering. I don't think there's any way around that without introducing complex markup or scripting. – zxqx Feb 20 '13 at 22:50
This is ingenious, but the browsers don't support it because they consider the corners as part of the shape. – entonio Feb 21 '13 at 01:00

Chris Danek · Accepted Answer · 2013-02-21T00:37:47.697

2

Check out this script if you need to activate hover/click only when mouse is within the circle (and not in the square bounding box) http://tympanus.net/codrops/2011/11/22/hover-and-click-trigger-circular-elements/

It’s not possible in CSS only, as all elements are treated as rectangles, even if they are rendered with rounded corners.

edited Feb 21 '13 at 00:37

answered Feb 21 '13 at 00:20

Chris Danek

577
4
9

Transparent png button hover without background

2 Answers2