Jump to content

CSS Title Hover for Gallery Images

Recommended Posts

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

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

@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

 

image.thumb.png.3bd65ce6acef7a81f5ac4e9f1be43cb0.png

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

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.