Adding Caption on Hover in Ishimoto Template

You could add some Custom CSS to make this happen. If you enable the captions, then share a link to your site in this thread, perhaps someone in the community can help.

2 hours ago, e2astudio said:

You could add some Custom CSS to make this happen. If you enable the captions, then share a link to your site in this thread, perhaps someone in the community can help.

Thanks! My site is www.samanthafalco.com

🙂

Have you enabled captions? I don't see any...

3 minutes ago, e2astudio said:

Have you enabled captions? I don't see any...

Should be enabled now!

Also looking to decrease opacity of caption font if anyone knows how to do that !

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

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!

 

Hello! This was really helpful thank you, but I was wondering if anyone knows how to change the font of the hover description?

Thanks!

To change the font size and weight, use the following:

.collection-type-gallery #slideshow .image-description {
  font-size: 16px;
  font-weight: 700;
}