CSS Title Hover for Gallery Images

Site URL: http://www.cleod9music.com/#index

Hi all! I've looked on some other forums, but haven't been able to get an answer that works for my site and was hoping someone could help me out.

I'm a novice with CSS and I'm currently trying to add a Hover title to my gallery grids on my website. I inserted the following custom CSS and was able to get a hover to display on my grid galleries, however, I'm not able to display the title over the hover. Please let me know if any of you have had experience with this or might have a solution to fix the problem, thank you in advance!!

.sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle {
 cursor: default;
 pointer-events: all !important;
}

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {
  background: #fddcce;
  opacity: .9;
}
  .sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor {
opacity: .1;
-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: 110px;
right: 0;
bottom: 0; 
left: 0;
padding: 2em;
-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; 
}

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

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
color: #273845; 
opacity:1; 
text-transform: uppercase; 
vertical-align: middle; 
font-size: 18px; 
line-height: 125%;
letter-spacing: 2px; 
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;
}
}

@rebecca122 The issue is you don't appear to have the Show Titles enabled for your gallery. Check out this page for Gallery and Summary settings: https://support.squarespace.com/hc/en-us/articles/206543337?platform=v6&websiteId=5ec93c4d0709953fc0c14de9