3

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.

DomHasQuestions
  • 33
  • 3

1 Answers1

1

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.

Carl Edwards
  • 13,826
  • 11
  • 57
  • 119
  • Thanks for the answer! If I did add a pseudo selector, wouldn't that change the entire landing page image? I want to target a specific part of the image, and turn that image to a different image on mouse-over. – DomHasQuestions Dec 03 '17 at 02:39
  • Does the second part of my solution deem useful to your question above? – Carl Edwards Dec 03 '17 at 02:41
  • Yes! That's a great idea that I think I can actually do with my skill level. That's totally going to work now that I think it through. I'll try and include the image for easy visualization. Again, thanks for the answer, Carl. – DomHasQuestions Dec 03 '17 at 02:54
  • No problem. Don't forget to mark this as correct if it solved your problem. – Carl Edwards Dec 03 '17 at 03:12