Hero image ease in from blur

[geirwerner70 (Geir Werner Hagen)]

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!

[vincent (Vincent Bidaux)]

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.

[geirwerner70 (Geir Werner Hagen)]

Thanks! I will try this. =)