Jump to content

How to Darken on Hover for Images in Gallery

Recommended Posts

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

 

Link to comment
  • Replies 23
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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!

Screen Shot 2021-03-03 at 9.36.02 AM.png

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

Screen Shot 2021-03-03 at 9.36.02 AM.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 11 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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";
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.