Hi,
I’m trying to create a “simple” hover state over an SVG shape which is a hexagon.
It’s currently invisible (opacity 0%) and I want it to be 100% on hover but currently, the SVG is an image and conforms to a square… if that makes sense. So I want it to change states only when you hover on the inside of the hexagon.
Any help would be appreciated.
Thanks,
Adrian
Hi,
This would be my example. All these hexagons are just SVG’s but they are, I guess, just really square images. I want them to have rollover effects but only on the inside of the hexagon itself.
Can you post your share link ? Also would be great if you could describe a bit more of your idea. For example - do you want to use them more than once? Or just one unique animation. Or if you have seen somewhere else on the web, a reference would also help.
Also you have referred to an svg image, there are 2 types, svg embed ( paste direclty svg code ) and svg object - served as an image. Hence if you shared project, it would be easier to offer you help.
Hi,
Thanks for the reply.
For the animation, nothing special - for example, the outlined hexagon would turn into a solid blue one. The solid blue one would just be another SVG hidden until the other is on hover. I would then copy this effect/color rollover for all hexagons.
So the animation or effect doesn’t really matter. It’s just that the hitbox needs to be the hexagon and not a square.
Here’s a link. Please excuse the settings of the overall thing as I’m sure it’s not too clean or the correct way
Right, the effect you want to achieve can be quite tricky. Some custom coding would be required. I quickly scribbled - something that I think you are trying to get.
Live Preview
http://magic-land-of-design.webflow.io/
Project
https://preview.webflow.com/preview/magic-land-of-design?preview=1eb54eaf554f2dad777e5073677ef6d6
Let me know if this is what you want!
That’s exactly what I was looking for 
Now I have to try to understand 
I see your code for the page and the HTML Embed code. How/where did you get the code for the SVG?
Do you think the code generated by Illustrator for such a simple object is clean enough to use?
Thanks a bunch for your time.
Yes, so here is what i did and why.
As you guessed right - you can copy paste code from illustrator. ( remember it will set specific height and width - change those accordingly ) - In my case i have 100% - because i want Embed frame to control dimensions.
Change in svg code - fill=“transparent” or any other colour you want. Add class to whatever you want - in my case i have class=“inside” which is accessed by JS.
pointer-events: none; is to prevent text to affect when user is hovering.
Im sure if you poke around the project you will figure out, main parts to look and understand is - how stuff is nested, z-index, position. If you have any trouble let me know.
This is awesome!
This will help me not only for this specific case but others in general.
I’ll take a look around today and you can delete tomorrow
Again, thanks a lot.
You’re welcome! Glad it helps
