Jump to content

How to darken images in gallery on hover?

Recommended Posts

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;}

Link to comment
  • Replies 10
  • Views 3k
  • Created
  • Last Reply

Top Posters In This Topic

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;
}
}

 

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
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!

Link to comment
  • 1 year later...

@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. 

 

Link to comment
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?

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
  • 1 month later...

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

Link to comment
On 12/2/2023 at 5:08 AM, abbiericher said:

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

I see you are using Gallery Block Grid, not Gallery Section

You use this code to reduce opacity, so it will affect both title + image

image.png.4283a1268ec8f9b389f011fb645d6a91.png

You can change that code to this code, to make it affect on image only

.sqs-gallery-block-grid img {
    opacity: 0.5 !important;
}

 

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
On 12/2/2023 at 11:05 PM, tuanphan said:

I see you are using Gallery Block Grid, not Gallery Section

You use this code to reduce opacity, so it will affect both title + image

image.png.4283a1268ec8f9b389f011fb645d6a91.png

You can change that code to this code, to make it affect on image only

.sqs-gallery-block-grid img {
    opacity: 0.5 !important;
}

 

Hi! I tried your code, but it still covers the title... 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.