How to darken images in gallery on hover?

Site URL: https://www.mishayeung.com

hi,

I'm trying to make an image darken when the mouse hovers over it, rather than lighten to the color of the background

But it doesn't work successfully in Gallery and List of images

my code is here:

/* Hover Effects - list */
.list-item img {
transition: all .5s ease-in-out;}

.list-item:hover img {
background-color: black;
opacity: 0.8; transition: all .5s ease-in-out;} 

/* Hover Effects - gallery */
.gallery-grid-item-wrapper img {
transition: all .5s ease-in-out;}

.gallery-grid-item-wrapper:hover img {
background-color: black; opacity: 0.8; transition: all .5s ease-in-out;}

Hi,

Hover image >> Show overlay only or show overlay + title?

11 minutes ago, tuanphan said:

Hi,

Hover image >> Show overlay only or show overlay + title?

hi,

show overlay only

thanks for your help

On 5/21/2022 at 3:59 PM, MishaY said:

hi,

show overlay only

thanks for your help

Add to Design > Custom CSS

body.homepage {
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}

2 hours ago, tuanphan said:

Add to Design > Custom CSS

body.homepage {
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}

 

It works! Thank you so much!

@tuanphan  I would love help with something similar, if you wouldn't mind helping me out!  I would like the artist gallery section on this page >> https://hen-bugle-ztfx.squarespace.com/about to show the caption on hover.  I would also love each image to have a dark overlay on it, unless on hover - then just the normal image.  Is this possible?  Kinda the reverse to what Misha was asking about. 

On 10/25/2023 at 2:35 AM, GPGDesigns said:

@tuanphan  I would love help with something similar, if you wouldn't mind helping me out!  I would like the artist gallery section on this page >> https://hen-bugle-ztfx.squarespace.com/about to show the caption on hover.  I would also love each image to have a dark overlay on it, unless on hover - then just the normal image.  Is this possible?  Kinda the reverse to what Misha was asking about. 

 

Which section are you referring to?

Hi @tuanphan!

I got a Grid Gallery on my page "À propos" with 6 images for each expertise's offering by my client. The Grid Gallery will be shown ONLY on MOBILE. Knowing that there is no "hover" on mobile, is it possible to darken (opacity) the images? I want my title to be appearing on top of the darken (opacity) image.

Here's the full code I used:
// Grid Gallery//
/*grid gallery opacity*/
.sqs-gallery-block-grid {
  opacity: 0.5;
}
/* Grid Gallery Label Titles */
section[data-section-id="65679c219179fd76167ef437"] {
  .sqs-gallery-block-grid .image-slide-title {
  background: none!important;
  color: #ffffff;
  font-weight: 600;
  font-size: 15px !important;
  padding: 20px 20px;
  position: absolute;
    top: 50px;
  bottom: 50px;
  display: inline-block;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
  box-sizing: border-box;
  }
}

But the opacity is over the title also. And I only want the opacity on the image.

https://ladybug-grapefruit-glbh.squarespace.com/

pss: freelance