Make an image appear gradually

hello, I would like to know if you know how to make an image appear gradually, a kind of crossfade, when the prospect scrolls, or when the page loads.

Thanks for your help

1 Like

Hey Charly_Elbaz,

Good question. This should be possible using some custom CSS. There are a couple of threads here in the Community with some instructions on how to add fade effects on-load, and on-scroll, which might be of use to you:

You are in quite the amount of luck!

I’m sorry that this is reaching you a couple days later, I only now got the email notification of the post. I happened to need the same effect for a page that I was working on, and in fact created a test page that has those elements in it.

The entire thing is controlled with CSS only, so no need to load any external scripts, and it’s pretty easy to configure just by looking at it and messing around with the animation timing settings, but let me know if you have any trouble or have additional questions.

I haven’t had a chance to do an on-scroll version of it, but looks like @Oliver_Lord already tackled that one!

1 Like

Thanks for sharing your test page @nlafakis - that fade in effect looks real smooth!

I made a test page for on-scroll animations, which you can find here. I hope that you find this useful.