Gallery Grid Color on Hover

Hello everyone, 

I'm desperately trying to make my homepage's gallery grid react to hover with grayscale 
https://havery.studio/ It's a simple Gallery Block 

I'm trying to replicate what i did it for my portfolio page : https://havery.studio/portfolio

I used this code for the Portfolio Hover Gray.

I don't have a clue how to do it for my homepage, thank you ! 🙂

//IMAGE HOVER//

.grid-item .grid-image{filter:grayscale(1)}

.grid-item:hover .grid-image{filter:grayscale(0)}

Thank you so much dear !  It worked !  🤩

Have a nice day ! 😄

Just now, hav_ery said:

Thank you so much dear !  It worked !  🤩

Have a nice day ! 😄

No problem, you too!

Quick question : 

It also greyed out my instagram posts (a little below), can i revert this ? @Ziggy :') 

Yes we, can target just that block with this addition to the code:

#block-yui_3_17_2_1_1690790463207_390758 {
 .sqs-gallery-design-grid-slide {
    filter: grayscale(0);
    transition:ease-in-out 300ms;
  &:hover {
    filter: grayscale(1);
  }
 }
}

The WebMagician nailed it, once again!

Thank you @Ziggy ! 😄 

my home page has a gallery using images from the portfolio pages. I'm looking for a code that will put a dark slightly purple filet over the images until you hover over them and then they would go full color. 

Any ideas?

On 11/7/2023 at 5:24 AM, rachy1105 said:

my home page has a gallery using images from the portfolio pages. I'm looking for a code that will put a dark slightly purple filet over the images until you hover over them and then they would go full color. 

 

Any ideas?

Can you share link to page? We can check easier

15 hours ago, tuanphan said:

Can you share link to page? We can check easier

https://www.themediumagency.com/portfolio

15 hours ago, tuanphan said:

Can you share link to page? We can check easier

I used this on the home page and it worked but want the same effect on the portfolio page !

.fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper {
    background-color: #7879a0;
}
.fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper img {
    opacity: .50;
    transition: all .4s;
}
.fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper img:hover {
    opacity: 1;
}

.fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper {
    background-color: #7879a0;
    border-radius: 125px; /* play around with this number */
    border: 3px solid #000;
}
 

any help is greatly appreciated! Thanks

On 11/11/2023 at 5:39 AM, rachy1105 said:

https://www.themediumagency.com/portfolio

I used this on the home page and it worked but want the same effect on the portfolio page !

 

.fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper {
    background-color: #7879a0;
}
.fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper img {
    opacity: .50;
    transition: all .4s;
}
.fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper img:hover {
    opacity: 1;
}

.fe-block-yui_3_17_2_1_1694104930278_8932 .summary-thumbnail.img-wrapper {
    background-color: #7879a0;
    border-radius: 125px; /* play around with this number */
    border: 3px solid #000;
}
 

 

 

 

any help is greatly appreciated! Thanks

 

 

Use this code for Portfolio Page

body#collection-654e9b252b202929ce6283c5 {
.summary-thumbnail.img-wrapper {
    background-color: #7879a0;
}
.summary-thumbnail.img-wrapper img {
    opacity: .50;
    transition: all .4s;
}
.summary-thumbnail.img-wrapper img:hover {
    opacity: 1;
}
.summary-thumbnail.img-wrapper {
    background-color: #7879a0;
    border-radius: 125px; /* play around with this number */
    border: 3px solid #000;
}}