Jump to content

Squarespace Fade Transition Speed Code CSS

Recommended Posts

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


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!

Edited by hcyr
just adding a tag
Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Try adding to Design > Custom CSS

	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;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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


Screen Shot 2022-05-17 at 10.52.12 AM.png

Screen Shot 2022-05-17 at 10.56.55 AM.png

Link to comment

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?

Edited by hcyr
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.