Hola everyone. Pleased to meet ya. I’m new to webflow! I’m wondering if anyone may help with a query.
So - I’m a graphic designer learning web design and I’m designing my second website for a family company.
Basically I’ve designed some icon buttons in illustrator. Ive designed two versions of each icon ‘button’, e.g. a light bulb and a glowing light bulb. In webflow, I’m wondering I can create a button of my lightbulb icon and upon mouse hover the button changes to the glowing light bulb icon? Would be super grateful for any help!
You can place a “Link Block” from the elements panel, give it a size and Position - Relative.
Place both designed icons in it, and give them both Position - Absolute and fill all.
Now that both icons are placed one above each other, make sure the default design is on top, you can switch them by reordering the layers in the layers panel.
Now select the top icon layer, in the “States” (above the class name) switch to Hover, and bring down the Opacity to 0%.
Done.
For a smoother transition between stages, select the top icon (when in regular-Non State) and add a Transition - Opacity.