Streaming live at 10am (PST)

SVG bounding box on hover


#1

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


#2

Hello @Adek

Do you have an example? Can you share some screenshots or your read only link please?


#3

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.

https://imgur.com/D7DxKw7


#4

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.


#5

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.


#6

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

https://preview.webflow.com/preview/pdo-9f413bb324fbc98ac084606057d81ff1?preview=79091aae31e3da8b02922de816966648


#7

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!


#8

That’s exactly what I was looking for :slight_smile:

Now I have to try to understand :wink:

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? :slight_smile:

Thanks a bunch for your time.


#9

Yes, so here is what i did and why.

  1. 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.

  2. 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.

  3. 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.


#10

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 :slight_smile:
Again, thanks a lot.


#11

You’re welcome! Glad it helps :wink: