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!