Show line on hover for a link

Hello everyone,
I need to recreate the blue line below the nav links that is shown here (http://www.papelregio.com/)
I know how to do it with an interaction, my problem is, I need it exactly as it is in the example. I need it to run from right to left. Do anyone know which transition I need to apply?

Thanks,

Design your nav exactly like when the animation is finished. For example by addin a div under the text, that you will give flot:right, a height of a few pixels and a width of a few dozens pixels. Now if you change the width, it shrinks and grow from the left.

So make you interaction on hover of the whole menu item, affecting this div and making it grow from width:0 to width:something.

2 Likes

Hi Vincent, it worked perfectly. Thank you very much!!

Hi Vincent, the hover interaction is working fine. The only problem is, that the line is visible before any hovering happens. It goes away as it should but only after I hover over. Any idea how to fix that? I tried giving it a display none style but then if I hove it won’t show anymore.

Any idea? @PixelGeek @vincent @Waldo

https://cl.ly/3g0c1I0Z3L0x

I’m leaving for the day and won’t be helpful today, but you’ll get an easy help at this stage if you’re providing your sharing link

1 Like

Hi Vincent, any idea how could I fix this? Thanks,

https://preview.webflow.com/preview/nevax?preview=5e480fbc8c9d07a798d628d7d234cbcc

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.