How to Darken on Hover for Images in Gallery

Hi! I am struggling to figure out how to have an image darken when the mouse hovers over it, rather than lighten to the color of the background. I'm working in the Forte template, into which I Frankensteined some code pieced together from various other forum posts and need some help with how to edit it so that the image darkens on hover(like this: http://demo.squarestud.io/grid-gallery-9). I'm pasting the code in use on the site below. Please help me, this is my first foray into code and I am totally clueless!

Code:

.sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor {
opacity: .4;
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
}

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
display: block;
position: absolute;
top: 0px;
right: 0;
bottom: 0; 
left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
padding: 0em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out; 
transition: all .3s ease-out;
margin-bottom: 0px !important; 
  pointer-events: none;
}

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
color: #000000; 
opacity: 0; 
text-transform: uppercase; 
font-size: 16px; 
line-height: 125%;
letter-spacing: 3px; 
margin-bottom: 240px;
}

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
color: #000000; 
opacity:1; 
text-transform: uppercase; 
vertical-align: middle; 
font-size: 16px; 
line-height: 125%;
letter-spacing: 3px; 
margin-bottom: 240px;
}

@media only screen and (max-width: 400px) {
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { 
color: transparent; 
opacity: 0;
}
}
header#header {
    padding-bottom: 20px;
}

Can you share link to page where you use gallery? We can help easier

Hi! Here is the link: http://www.erinsanger.com/

On 3/1/2021 at 10:21 PM, LenW said:

Hi! Here is the link: http://www.erinsanger.com/

Add to Design > Custom CSS

/* Darken summary on hover */
div#block-yui_3_17_2_1_1611589263652_6335 .slide a:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
}
div#block-yui_3_17_2_1_1611589263652_6335 .slide a {
    position: relative;
}
div#block-yui_3_17_2_1_1611589263652_6335 .slide a {
    position: relative;
    opacity: 1 !important;
}
div#block-yui_3_17_2_1_1611589263652_6335 .slide:hover a:after {
	opacity: 1;
}

This is amazing!! One question though - I want the text to be white and overlay on top of the darken effect. When I added this code in and made the text white, this darken overlay makes the white text darken to grey - I attached an image. 

Any thoughts on how to fix this or if it is possible?

Thank you again SO much - I so appreciate your help as a clueless squarespace user!

On 3/3/2021 at 9:38 PM, LenW said:

This is amazing!! One question though - I want the text to be white and overlay on top of the darken effect. When I added this code in and made the text white, this darken overlay makes the white text darken to grey - I attached an image. 

Any thoughts on how to fix this or if it is possible?

Thank you again SO much - I so appreciate your help as a clueless squarespace user!

Don't remove above code.

Add this code

a.image-slide-anchor.content-fill {
    opacity: 1 !important;
}
a.image-slide-anchor.content-fill:after {
    content: "";
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
}
.slide:hover a.image-slide-anchor.content-fill:after {
    opacity: 1;
}
.image-slide-title {
    color: white !important;
    pointer-events: none;
    z-index: 10000;
}

@tuanphan one more question for you! The cursor remains the black arrow instead of turning into the hand indicating a clickable link - is there any way to fix this so the cursor turns into the pointer finger on hover? Thanks a million for all your help - it's a HUGE lifesaver! 

On 3/29/2021 at 9:40 PM, LenW said:

@tuanphan one more question for you! The cursor remains the black arrow instead of turning into the hand indicating a clickable link - is there any way to fix this so the cursor turns into the pointer finger on hover? Thanks a million for all your help - it's a HUGE lifesaver! 

Try remove 

pointer-events: none;

@tuanphan that just turned the mouse into a text cursor. Any other ideas that might help? I'm posting the current custom code - maybe seeing it will help!

Thanks again!!

/* Darken summary on hover */
div#block-yui_3_17_2_1_1611589263652_6335 .slide a:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
}
div#block-yui_3_17_2_1_1611589263652_6335 .slide a {
    position: relative;
}
div#block-yui_3_17_2_1_1611589263652_6335 .slide a {
    position: relative;
    opacity: 1 !important;
}
div#block-yui_3_17_2_1_1611589263652_6335 .slide:hover a:after {
    opacity: 1;
}
a.image-slide-anchor.content-fill {
    opacity: 1 !important;
}
a.image-slide-anchor.content-fill:after {
    content: "";
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
}
.slide:hover a.image-slide-anchor.content-fill:after {
    opacity: 1;
}
.image-slide-title {
    color: white !important;
    z-index: 10000;
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor {
opacity: .4;
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
}

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
display: block;
position: absolute;
top: 0px;
right: 0;
bottom: 0; 
left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
padding: 0em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out; 
transition: all .3s ease-out;
margin-bottom: 0px !important; 
pointer-events: none;
}

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
color: #000000; 
opacity: 0; 
text-transform: uppercase; 
font-size: 16px; 
line-height: 125%;
letter-spacing: 3px; 
margin-bottom: 240px;
}

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
color: #000000; 
opacity:1; 
text-transform: uppercase; 
vertical-align: middle; 
font-size: 16px; 
line-height: 125%;
letter-spacing: 3px; 
margin-bottom: 240px;
}

@media only screen and (max-width: 400px) {
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { 
color: transparent; 
opacity: 0;
}
}
header#header {
    padding-bottom: 20px;
}

On 4/2/2021 at 10:08 PM, LenW said:

@tuanphan that just turned the mouse into a text cursor. Any other ideas that might help? I'm posting the current custom code - maybe seeing it will help!

Thanks again!!

/* Darken summary on hover */
div#block-yui_3_17_2_1_1611589263652_6335 .slide a:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
}
div#block-yui_3_17_2_1_1611589263652_6335 .slide a {
    position: relative;
}
div#block-yui_3_17_2_1_1611589263652_6335 .slide a {
    position: relative;
    opacity: 1 !important;
}
div#block-yui_3_17_2_1_1611589263652_6335 .slide:hover a:after {
    opacity: 1;
}
a.image-slide-anchor.content-fill {
    opacity: 1 !important;
}
a.image-slide-anchor.content-fill:after {
    content: "";
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
}
.slide:hover a.image-slide-anchor.content-fill:after {
    opacity: 1;
}
.image-slide-title {
    color: white !important;
    z-index: 10000;
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor {
opacity: .4;
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
}

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
display: block;
position: absolute;
top: 0px;
right: 0;
bottom: 0; 
left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
padding: 0em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out; 
transition: all .3s ease-out;
margin-bottom: 0px !important; 
pointer-events: none;
}

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
color: #000000; 
opacity: 0; 
text-transform: uppercase; 
font-size: 16px; 
line-height: 125%;
letter-spacing: 3px; 
margin-bottom: 240px;
}

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
color: #000000; 
opacity:1; 
text-transform: uppercase; 
vertical-align: middle; 
font-size: 16px; 
line-height: 125%;
letter-spacing: 3px; 
margin-bottom: 240px;
}

@media only screen and (max-width: 400px) {
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { 
color: transparent; 
opacity: 0;
}
}
header#header {
    padding-bottom: 20px;
}

ah, add this code

.slide a:after {
    cursor: pointer;
}

That worked!! Thank you SO much :D

Hi ! Could you please help me out on the same subject? I would like to apply the code to my site but I think I'm doing something wrong and its not working, or maybe I'm missing a step ?

I have images on the bottom of the site where I want them to turn dark and with text overlay on hover.

Here is my page :

https://www.tykhe.xyz/bairro-alto

Thank you !

19 hours ago, KathySol said:

Hi ! Could you please help me out on the same subject? I would like to apply the code to my site but I think I'm doing something wrong and its not working, or maybe I'm missing a step ?

I have images on the bottom of the site where I want them to turn dark and with text overlay on hover.

Here is my page :

https://www.tykhe.xyz/bairro-alto

Thank you !

 

You mean More Project Images? Can you enable text first? We don't see any text to check the code

Yes exactly, in more projects images I would like the text to hover. I now enabled the caption below is that what you meant ? Sorry I'm new to this!

I changed it at this page : https://www.tykhe.xyz/alcantara

22 hours ago, KathySol said:

I changed it at this page : https://www.tykhe.xyz/alcantara

 

Add to Design > Custom CSS

/* Alcantara */
body#collection-623c99f8d822f26856068ea3 {
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* 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;
}}

Thank you so much that's really helpful !!! just one question, how can I make the overlay text white and in the same font as the main menu of the website ?

And also which part of the code do i need to change to make it work for the other pages ?

Thank you !!

Actually i figured it out so i'm fine ! thanks so much for your help !

Hi all. 

I would like to achieve the same results of lenW website. I would like to add an opaque white layer on the image with a black title and subtitle on it when the cursor goes on top. 

this is the page https://apricots-tunny-yy4c.squarespace.com/nuova-pagina

password Hiro96

Thank you!

like this website http://www.erinsanger.com/

but with white shadow on the image and black font title + subtitle.

On 5/10/2022 at 7:00 PM, gppp96 said:

Hi all. 

I would like to achieve the same results of lenW website. I would like to add an opaque white layer on the image with a black title and subtitle on it when the cursor goes on top. 

 

this is the page https://apricots-tunny-yy4c.squarespace.com/nuova-pagina

password Hiro96

 

Thank you!

 

You mean

Hover: Show white overlay + Show title + Show subtitle. Title/sub will over image on center

Is this right?

yes

On 5/13/2022 at 2:54 PM, gppp96 said:

yes

 

With subtitle, use this code

body#collection-6279314ca417ed4a39ac61a0 {
figure p.gallery-caption-content:after {
    display: block;
    position: absolute;
    top: calc(~"50% + 10px");
}
figure:nth-child(1) p.gallery-caption-content:after {
	content: "subtitle 1";
}
figure:nth-child(2) p.gallery-caption-content:after {
	content: "subtitle 2";
}
figure:nth-child(3) p.gallery-caption-content:after {
	content: "subtitle 3";
}}