Jump to content

Thumbnail change on hover

Recommended Posts

  • Replies 1
  • Views 979
  • Created
  • Last Reply

The best way to do this would be to have the black and whiteimages loaded to the site and a script to swap the color and grayscale versions. 

However, there's a rough and ready pure css way of doing it using filters. 

#projectThumbs a:hover img {
	filter: grayscale(1) brightness(6);

This effectively grayscales the image and then blows out the intermediate shades of gray using brightness. 

It's not perfect - fine detail is lost in some images.  However, I think that could be tweaked by creating custom brightness values for specific images.

As I say, the best way is to use scripting to image swap. 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  


Link to comment


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.