Streaming live at 10am (PST)

How to make the gradient smooth? (Hover effect)


#1

Hello, webflow! I want the gradient to increase smoothly when you hover the block.

But none of the functions of transition creates a smooth transition of the gradient.
How can I solve my problem?


And when you turn on one of the functions of transition - the block starts moving. Look at this, using the link

https://preview.webflow.com/preview/people-5d6ed0?preview=aef832819e1454c1e02359b8ca344065


#2

Hello @Bogette

Have you consider using an overlay div block with the gradient you want and make the opacity 0 and when on hover 100%?


#3

Hello @aaronocampo

If I understood correctly, I did as you said. Created a div-block, superimposed on the block-links and made the opacity of the gradient for the div-block.

But smoothness with the tools of transforms is still impossible to achieve. I made the opacity 1158ms (on the transform panel) - this did not work.

Go to the online link again. I updated the site, taking into account your words


#4

I made a small video for you, hope this helps


#5

Thank you very much for the video! It really turned out to be very easy to do, @aaronocampo. But a new question arose: the block-link, to which I assigned the effect “grayscale” - makes the div-block have a color, according to this effect.

Because of this effect, the color on the hover becomes dark gray. Look again. Why?



#6

In that case I would suggest to use 2 divs

  1. With the image you want to show
  2. The overlay gradient on top of that with the grayscale effect

In that way you wont affect the image.