Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding Caption on Hover in Ishimoto Template


Samantha3379

Question

Hello all,

I need some help! I am currently using the Ishimoto template because I want my Collection of Images/horizontal scroll Gallery to stretch the entire width of the screen. However, with this template, captions are either ON or OFF - there is no option for CAPTION ON HOVER. There is this hover option on other templates, but their horizontal scroll galleries do not stretch the entire width of the screen. 

Does anyone know how I can achieve what I am looking for? It appears that people have posted HTML codes for this issue in past Squarespace forums, but sadly Squarespace has removed them (hmph!). 

Thanks!

Link to comment
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

9 answers to this question

Recommended Posts

  • 0

Add these CSS snippets to the Custom CSS editor (Design -> Custom CSS) and they will effect each slideshow gallery you use. First, we need to override the caption opacity of the active slide being set by the template, then bring back the opacity to the level you prefer, but only on active image hover:

/* even though they are turned on, hide the image caption */
.collection-type-gallery #slideshow .slide.sqs-active-slide[data-type="image"] .image-description {
  opacity: 0 !important;
}
/* bring the opacity back, only on image hover */
.collection-type-gallery #slideshow .slide.sqs-active-slide[data-type="image"]:hover .image-description {
  opacity: 0.85 !important;
}

 

Link to comment
  • 0
On 10/30/2019 at 5:55 PM, e2astudio said:

Add these CSS snippets to the Custom CSS editor (Design -> Custom CSS) and they will effect each slideshow gallery you use. First, we need to override the caption opacity of the active slide being set by the template, then bring back the opacity to the level you prefer, but only on active image hover:


/* even though they are turned on, hide the image caption */
.collection-type-gallery #slideshow .slide.sqs-active-slide[data-type="image"] .image-description {
  opacity: 0 !important;
}
/* bring the opacity back, only on image hover */
.collection-type-gallery #slideshow .slide.sqs-active-slide[data-type="image"]:hover .image-description {
  opacity: 0.85 !important;
}

You are amazing! Thank you kindly!

 

 

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