Clipping Image to activate Hover only on clipped area.

[Marcelo Allende]

Hey guys, I’m new here on the forum, and I’ve been breaking my head trying to solve this issue.
I have a 3 triangle menu, which are square images. I’m trying to delimit the area of the hover effect, but it seems impossible.

Tried with SVG and clip-path but both doesn’t work. I’m wondering if this is really possible or not.

Here is are the working exemples:

https://codepen.io/anon/pen/PBaXqw

https://codepen.io/anon/pen/YjvOgw

https://codepen.io/anon/pen/Yjvdez

Anyone knows how to solve that?

Regards,
Marcelo Allende

[Pogany]

Hi Marcelo,

I’ve chosen to work with your second pen because it is the only one where I can see something.
I’ve putted the polygon outside the defs because I wanted to see the polygon.
The clipPath was not closed.

Also I’ve deleted some of your CSS because you apply the clipPath to the SVG and I understand that you need to cut the image. (I may be wrong).

To change the image I’m using JavaScript. This is my pen:
https://codepen.io/giaco/pen/BPPLmz?editors=1010

I hope it helps

[Marcelo Allende]

Hi Pogany, how are you?

First of all, thanks for taking the time to help me.
I spent more than 3 days trying to figure it out and thought it was not possible.

So we need to use JS to achieve this effect.
But what about inserting a link now? And why now the background of the SVG path is black and not transparent?

It is meant to be a menu of 3 triangles side by side, that directs to different portfolio sections.

I tried to duplicate the images to see if they appear side by side, but nothing happened.

I found this but I totally don’t know how to insert on JS.

var a = document.createElement(‘a’);
var linkText = document.createTextNode(“my title text”);
a.appendChild(linkText);
a.title = “my title text”;
a.href = “http://example.com”;
document.body.appendChild(a);

Updated code with the right path:
https://codepen.io/anon/pen/QBBMYq

Regards,
Marcelo Allende

[Pogany]

Hi Marcelo

This is the modified pen:

https://codepen.io/giaco/pen/BPPLmz?editors=1010

I’ve added a link: In SVG exactly as in HTML you may use the a tag for this. You can do it in SVG. You don’t need JavaScript for this.

The SVG path was black and not transparent because I’ve putted it outside the defs tag. Now you have it again in the defs and thus invisible again.

I hope you’ll find it useful.

[Author]

Posts