Jump to content

Image Description Hover Feature

Recommended Posts

Hi there!

I am looking to have the alt. text descriptions of each of my images pop up in a separate box when the mouse hovers over each image. For some reason I am not given the same Gallery Drop-Down menu where I can select text box overlay, inset etc.  Anyone have any idea what I can do from here to figure this out? 

When I click to edit the block, I am given the options of Gallery and Colors.  In the Gallery type I can choose which gallery type or change to a slideshow type, but there is no option to change the formatting of the text description boxes. Please Help!

Link to comment
  • 1 month later...
  • Replies 3
  • Views 878
  • Created
  • Last Reply

Single image blocks have the option for caption underneath, overlay, overlay on hover. Gallery blocks do not have that ability. If you choose a grid layout then the description shows up underneath the image. Simple grid layout has lightbox capability. Code may work depending on the template,  and if it is  7.0 or 7.1.  Business plan is required, and this code would go into custom css. 

/*
** in gallery grid, set a hover over slide effect to 
** display slide title on partially transparent
** overlay
*/
.sqs-gallery.sqs-gallery-design-grid .slide 
.margin-wrapper .image-slide-title {
 position: absolute;
 bottom: 0;  
 width: 100%;
 height: 0;
 color: white;
 background-color: rgba(194, 194, 163, .8);
 opacity: 0;
 transition: all .25s ease-in;
}
.sqs-gallery.sqs-gallery-design-grid .slide 
.margin-wrapper:hover .image-slide-title {
 height: 40%;
 opacity: .9;
}  
 

 

Link to comment
  • 2 weeks later...
Quote

Single image blocks have the option for caption underneath, overlay, overlay on hover. Gallery blocks do not have that ability. If you choose a grid layout then the description shows up underneath the image. Simple grid layout has lightbox capability. Code may work depending on the template,  and if it is  7.0 or 7.1.  Business plan is required, and this code would go into custom css. 

Does this code recreate an alt-text hover tag? If so, I can't seem to get it to work on mine. I'm using a masonry gallery; does that change anything?

www.greatertherapy.com/documents

Thank you.

Link to comment

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.