Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
J-Adel86

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!

Share this post


Link to post

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

 

Edited by derricksrandomviews

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...