The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Clipping Image to activate Hover only on clipped area.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #275029
    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:

    Anyone knows how to solve that?

    Marcelo Allende


    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:

    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.title = “my title text”;
    a.href = “”;

    Updated code with the right path:

    Marcelo Allende


    Hi Marcelo

    This is the modified pen:

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.