Jump to content

Tremont template (v.7.0) gallery grayscale effect removed on only the individual image is hovered.

Go to solution Solved by tuanphan,

Recommended Posts

site: https://chameleon-tangerine-lbcl.squarespace.com/gallery-tremont
site pass: aspen1928

I've tried everything, but no success. I'm attempting to replicate a Cube Portfolio effect where all images in the gallery page(s) are grayscale until the mouse is hovered - but only the individual image color is revealed, and the image magnifies slightly - not all the images at the same time.

Example: https://gaston.chiuki.com/work/

This code works half-way, but not the hover function. 

#collection-63e171c55b32544875cfa03f {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#collection-63e171c55b32544875cfa03f:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

I've tried every combination I can think of. Can someone help?


 

Link to comment

You're applying the grayscale filter to the entire page, and removing it on hovering on the entire page, you'll need to target each image individually for both the filter and the hover.

Try this CSS instead:

#collection-63e171c55b32544875cfa03f {
  .collection-type-gallery .grid-image-wrapper img {
    filter: grayscale(100%) !important;
    transition:ease-in-out-400ms;
  }
  .collection-type-gallery .grid-image-wrapper img:hover {
    filter: grayscale(0%) !important;
  }
}

Hope that works better for you!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution
On 2/7/2023 at 7:10 PM, Chiuki said:

Thanks, but this also didn't work the images are neither gray, nor does mouse hover have any apparent effect.

I tried adding various other element tags but still no effect (chrome nor FF)

Don't remove any code in your current code. Add this to Design > Custom CSS

.grid-item-wrapper:hover img {
    filter: grayscale(0) !important;
    -wekit-filter: grayscale(0) !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

I'm absolutely flabbergasted! You're a genius! Thank you so so so much for the help. Now I can finally proceed! 
 

// Full working code to grayscale images and remove on hover for Trémont v.7.0 template

#collection-63e171c55b32544875cfa03f img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#collection-63e171c55b32544875cfa03f .sqs-gallery-design-grid-slide img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}
.grid-item-wrapper:hover img {
    filter: grayscale(0) !important;
    -webkit-filter: grayscale(0) !important;
}

 

Edited by Chiuki
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.