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

York Theme - How can I make the index images greyscale but color on mouseover / hover?

Question

Posted (edited)

Hi!

I'm trying to code an index page's images to all be greyscale until you hover or mouseover them. Is this possible? I feel like this is a fairly simple fix but I can't figure it out looking at the inspector.

Edited by drawingonblank
Initial Revision

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0
Posted (edited)

@drawingonblank First, you need to find Index Page ID. See how to: https://beaverhero.com/squarespace-how-to/#HowtoFindPageIDThen Add to Home > Design > Custom CSS


body#collection-563bea6ae4b0ccc59db69084 img {
       -webkit-filter: grayscale(100%);
       filter: grayscale(100%);
   }
body#collection-563bea6ae4b0ccc59db69084 img:hover {
       -webkit-filter: none;
       filter: none;
   }




Edited by tuanphan
Initial Revision

Share this post


Link to post
  • 0

@drawingonblank body#collection-563bea6ae4b0ccc59db69084 is ID (in example i sent above).

Add all code (replace body#...084 with your page id), and insert to Home > Design > Custom CSS

Share this post


Link to post
  • 0

@tuanphan could I use this code and modify it somehow to make the index thumbnail change to a different image on hover?

Edited by kmast

Share this post


Link to post
  • 0
5 hours ago, kmast said:

@tuanphan could I use this code and modify it somehow to make the index thumbnail change to a different image on hover?

Try https://www.mybilliedesigns.com/blog/squarespace-customization-html-hover-effect

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