javascriptjqueryhtmlcssflexboxgrid

How to add a mouse-over image on a landing page graphic

Right away, I have to apologize for not knowing how to correctly phrase my question. Hopefully my point comes across in this description.

I have a full page landing graphic on a website that I'm working with. What I want to learn to do is to make a part of the graphic change when you mouse over it.

HTML

<header id="full-landing">

CSS

#full-landing{
background: url('../images/Asset 64.svg');
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
}

Thank you.

IMAGE-I would like to change each hexagon on mouse-over.

enter image description here

So I thought that maybe SVG animation could work for this. But I am not sure. I would like to add a mouse-over to each colored hexagon.

Solution

  • Just add a :hover pseudo selector:

    #full-landing:hover {
  background-image: url('../images/different-image.svg');
}

    What I want to learn to do is to make a part of the graphic change when you mouse over it.

    Though this is more of a graphic related solution vs. code you could copy the original image, slightly alter it to your liking, and use that in your :hover pseudo selector. If not, positioning/overlaying the two could be more trouble than it's worth. Of course this is all without seeing your image(s). I could be wrong.