Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Thumbnail change on hover


1 answer to this question

Recommended Posts

  • 0

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. 

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post

Link to post

Create an account or sign in to comment

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

  • Create New...