Streaming live at 10am (PST)

Hero image ease in from blur


#1

I´ve searched but to no avail...What I want is to have the hero image ease in from a blur state when loading. I am new to Webflow so it´s possibly easy? Does anyone know how to do this if possible?

thanks!


#2

You can pile up 2 images in a div using absolute positionning. Make the one below blurry, then make the one on top invisible with opacity. Now craft an OnLoad interaction that is going to make the image on top gradually appear (opacity 0 to 100% in 2000ms for example).

You could achive the unblur with JS but the method I just gave you produce a very acceptable effect and you odn't need any custom code.


#3

Thanks! I will try this. =)


#4

This topic was automatically closed after 60 days. New replies are no longer allowed.