Jump to content

Graysacle hover effect on all images but the one hovering over

Recommended Posts

Site URL: https://www.reidpohland.com/portfolio

I'm wondering how I can code so when I hover over one of the circles on the site, all of the other ones that I'm not hovering over turn grayscale? I'd like it so when you don't hover over any they are still full color, but when you hover over one that one is the only one that is still color.

I'd like effect of the gallery on this site:

But I can't find how to isolate the images properly.

Link to comment
  • Replies 3
  • Views 815
  • Created
  • Last Reply
10 hours ago, dnalhop said:

Site URL: https://www.reidpohland.com/portfolio

I'm wondering how I can code so when I hover over one of the circles on the site, all of the other ones that I'm not hovering over turn grayscale? I'd like it so when you don't hover over any they are still full color, but when you hover over one that one is the only one that is still color.

I'd like effect of the gallery on this site:

But I can't find how to isolate the images properly.

Add to Design > Custom CSS

/* grayscale images */
div#page-section-60c694a15b087b02325e889c>.row:hover .image-block {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
div#page-section-60c694a15b087b02325e889c>.row:hover .image-block:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
7 hours ago, tuanphan said:

Add to Design > Custom CSS


/* grayscale images */
div#page-section-60c694a15b087b02325e889c>.row:hover .image-block {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
div#page-section-60c694a15b087b02325e889c>.row:hover .image-block:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

 

That works great. Just wondering if there is a way I can ease the color back in when the hover is released?

Link to comment
On 6/18/2021 at 9:18 PM, dnalhop said:

That works great. Just wondering if there is a way I can ease the color back in when the hover is released?

Hi. I see fine here. Can you explain clearly?

Video: https://www.loom.com/share/6464863a388c411a91895e64a54cff97

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

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.