Squarespace Fade Transition Speed Code CSS

Site URL: https://www.helenecyr.com/

Hello!

Does anyone know of a CSS code to help with smoother image transition? I'm afraid what I have now is clunky and too flashy with a stark white in between the images on my cover page:(

Please see what I mean on my cover/splash page  https://www.helenecyr.com/
and what I'm hoping to achieve (note the soft transition in comparison)  https://jonaspeterson.com/

MUCH much appreciated!
Hélène

Try adding to Design > Custom CSS

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

Hello Tuanphan,

Thank you for reaching out and helping.

I have attached a screen shot. I'm on my home page where I want to implement the slow transition. Please note I'm unsure where the "Design" panel is?  (see screen shot)

Would it be in the Advanced section on line 20 where I should paste your above code? (see screen shot)

Much appreciated! - Helene

Hello again,

I was bold and pasted your suggested code onto line 20 in the screen shot above. I'm afraid it did not make any difference:(

Perhaps I did not do it right?

No. First access https://www.helenecyr.com/config

Next, look left > Click Design

Next click Custom CSS (bottom)

Add code there

Hello again Tuanphan,

Thank you, so I did that. The first image comes in beautifully but sadly the next images still come in abruptly!

May I ask your advise once more.. any other options?

https://www.helenecyr.com/

Thanks!