How to create a hover filter for everything but the hovered item in galleries?

Site URL: http://mirandameeks.com/

Hello,

I'm new to CSS and I can't figure it out! I'd like to be able to present my portfolio in full color when you first visit the site, but once you hover over an image in the gallery section, the rest of the images fade to grayscale while the current hovered image maintains its color. Sort of a hover effect on everything but the hovered image, almost like a spotlight, if that makes sense.

My old website did it and I can't remember how I added it:
http://mirandameeks.com/

Another example is this:
https://codepen.io/jensgro/pen/ohdgF

I currently have this custom CSS, which has the right hover effect, but it's only affecting the hovered item. I would like this effect, but opposite (i.e. affecting the other gallery images instead):

.gallery-masonry-item 

img{
  filter:grayscale(0%); 
  transition:10s;
  opacity: 1;
  transition: 1s;
}

img:hover{
  filter:grayscale(1);
  opacity: .7;
  transition: .7s;
}

It's important that the items maintain their color on their own, but only become grayscale once you hover over an image. Everything else I could find online sets the images to a grayscale filter "permanently" which I don't want.

Thanks for your help, much appreciated!

Hi. Can you share link to page on new site where you want to apply effect?

Oops, yes, here is the website on which I'm wanting to apply the effect:

tambourine-apple-mjh4.squarespace.com

Your site is Private. Please set up a site-wide password. Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Wow, so sorry about that! Totally missed that.

It's password protected now, the password is: Testing123abc

Hopefully that works!

10 hours ago, creedon said:

First remove, save a copy somewhere, any previous attempts at this effect.

Add the following to Design > Custom CSS.

/*

  begin page section gallery masonry hover on 'everything but'
  
  SS Version  : 7.1
  
  Version     : 0.1d0
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  .gallery-masonry-item {
  
    -webkit-transition : opacity 0.25s;
    -o-transition : opacity 0.25s;
    transition : opacity 0.25s;
    
    }
    
  .gallery-masonry-wrapper:hover .gallery-masonry-item {
  
    -webkit-filter : grayscale( 1 );
    filter : grayscale( 1 );
    
    opacity : 0.5;
    
    }
    
  .gallery-masonry-wrapper:hover .gallery-masonry-item:hover {
  
    -webkit-filter : grayscale( 0 );
    filter : grayscale( 0 );
    
    opacity : 1.0;
    
    }
    
  /* end page section gallery masonry hover on 'everything but" */

Let us know how it goes.

This worked perfectly! Thank you so much!

I have updated my code post. I added some additional gallery types. No change in effect for masonry.

@mmeeks I see this. Do you want fix?

Site URL – http://mirandameeks.com/

1. You haven’t installed SSL (free) so the browser address bar shows “Not secure”

2. (Mobile-Homepage) Page looks long. Want to add a back to top button?

3. (Mobile-Footer) Reduce space under tex