Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to Darken on Hover for Images in Gallery


LenW

Question

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 post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

10 answers to this question

Recommended Posts

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

 

Link to post
  • 0

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 post
  • 0
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;
}

 

Link to post
  • 0

@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 post
  • 0
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;
Link to post
  • 0

@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 post
  • 0
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;
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...