Hello Webflowers,
Hope everyone is doing well.
After doing different tests, and following different solutions suggested in the forum, I just don’t achieve to properly replicate the navigation bar from Fubiz.
• Reference: http://www.fubiz.net/
The top one with “NEWS — TV — TALKS…” that has a smooth gradient apparition when hovering.
Could someone help on this?
I am looking forward to your replies,
Thank you!
That’s easy - just add inside each button an object that you wish for your gradient - a div with the gradient fill, then add interactions for every button to follow your mouse horizontally. That’s about it.
@dram You’re making shortcuts I’m not sure to understand, but let me try first and come back at you. Thanks a lot for your help!
Oops, sorry about that. After using Webflow for a while you start forgetting that easy stuff has to be learned first.
Basically what happens here is that we are using a move over element interaction - see how in your example the gradient follows your cursor? The gradient itself is just a square div with gradient fill - watch it closely and you will see. So the task is to put this gradient object inside our buttons’ fill object (the one that shows up only when we hover it!) and create an interaction for the buttons telling this gradient div to follow our cursor while hovered on.
@dam Thank you for the details. I’m not so far from successfully putting your process into place, unfortunately, it’s still very clumsily orchestrated and I can’t achieve to do what you explain.
If you have a few minutes, I would love if you could have a take on it so I can see how you proceed.
Let me know,
And I’m sorry for the inconvenience…
Alright, have a look.
@dram Thanks so much! I’m studying it right now.
Is it all made out of Div Blocks?
And only thing is, we can see the gradient in & out limits, is there any way to smoothen it? Maybe a blur? (I’ll find out for myself, just asking in case you have a clear and definite solution).
The gradients in chrome may look wonky sometimes and you will have to find a right settings for the gradient overlay to look perfect. Or you may just use images, the result will be the same.
Yep, only divs here.