Jump to content

Display Title & Description On Hover for Gallery Grid

Recommended Posts

I've been trying to display the title and description of these images in a gallery grid on hover. I've been searching the forums and found some helpful code, but nothing that's exactly what I'm looking for. 

This is the code I am currently using (see below). It is displaying only the title on hover. I need it to display the title and description on hover. Does anyone have any suggestions?

I'd also love the opacity to cover the entire image (right now it covers almost all but just the sliver of the top isn't covered). Let me know if anyone has any suggestions. Thank you!

 

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
 display: block; 
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 padding-top: 5em;
 -webkit-transition: all 300ms ease-out; 
 -moz-transition: all 300ms ease-out; 
 -o-transition: all 300ms ease-out; 
 -ms-transition: all 300ms ease-out; 
 transition: all 300ms ease-out; }

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 background: rgba(240,240,240,0.8); }

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
 font-family: sans-serif, futura pt ;
 font-size: 14px;
 font-style: bold;
 text-transform: uppercase;
 letter-spacing:4px;
 color: #fff;
 opacity: 0; }

.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
 font-family: sans-serif, futura pt;
 font-size: 14px;
 font-style: bold;
 text-transform: uppercase;
 letter-spacing:4px;
 color: #000;
 opacity: 1; } 

Screen Shot 2020-04-07 at 4.23.17 PM.png

Link to comment
  • Replies 3
  • Views 597
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.