Click through transparent area on partially transparent image

Question

Given some shape, I would like it to be clickable on its filled parts, and not clickable (thus clicking through to the element behind it) on its transparent parts. Here's an example of a triangle shape:

Black lines are bounding box lines. I would like to be able to select text, or interact with any element that is within bounding box (green-outlined areas), but not covered with the filled part.

I tried SVG with pointer-events set to every possible value, but it does not seem to work. Preferred solution would make us of html5, css and png image, but every working solution is welcomed.

I believe you'll find your answer in a previous question: stackoverflow.com/questions/4621305/… — Nicklas Nygren
– Nicklas Nygren, Commented Aug 3, 2013 at 11:44
that previous question links to stackoverflow.com/questions/5948251/… — Thilo
– Thilo, Commented Aug 3, 2013 at 12:03

Chetan bane · Accepted Answer · 2015-02-18 09:03:16Z

1

You can add style property

pointer-event:none

to Image it will help you out through the image

Note: it will work only to modern browsers

answered Feb 18, 2015 at 9:03

Chetan bane

394 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oktokolo Over a year ago

The question is about click-through on transparent areas of an element only. But "pointer-event: none;" makes the entire element click-through.

Collectives™ on Stack Overflow

Click through transparent area on partially transparent image

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related