LenW

Same! This is what mine looks like in the editor. Sackett template 

That worked!! Thank you SO much :D

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

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

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!

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

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