CODEWITHSUNDEEP
htmlcsspng
user2093234
user2093234

Reputation: 13

Transparent png button hover without background

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.

Upvotes: 1

Views: 4172

Answers (2)

Chris Danek
Chris Danek

Reputation: 687

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.

Upvotes: 2

zxqx
zxqx

Reputation: 5205

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.

Upvotes: 3

Related Questions