Jump to content

Image hover delay

Recommended Posts

I'm trying to create a hover effect like this: one image will be displayed, and when you hover there will be a different image, and it goes back to the original image on mouse out.

I figured out a way to switch the images using Markdown (eg below, minus brackets)

img src="https://static1.squarespace.com/static/5c4176385ffd20a4ddf6fb6b/t/5d1f8e31f92b0b0001548095/1562349114073/5D3B0141.jpg" onmouseover="this.src='https://static1.squarespace.com/static/5c4176385ffd20a4ddf6fb6b/t/5d1f8e41f92b0b0001548148/1562349129885/5D3B0142.jpg'" onmouseout="this.src='https://static1.squarespace.com/static/5c4176385ffd20a4ddf6fb6b/t/5d1f8e31f92b0b0001548095/1562349114073/5D3B0141.jpg'"

but I want the images to quickly fade into the other instead of jarringly swapping. I think it's possible to do the fade part using CSS, but I'm using js for the other part. How can I do both of these things using the same language?

Link to comment
  • Replies 0
  • Views 633
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • 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.