Samantha3379 Posted October 30, 2019 Share Posted October 30, 2019 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
e2astudio Posted October 30, 2019 Share Posted October 30, 2019 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. Link to comment
Samantha3379 Posted October 30, 2019 Author Share Posted October 30, 2019 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 🙂 Link to comment
e2astudio Posted October 30, 2019 Share Posted October 30, 2019 Have you enabled captions? I don't see any... Link to comment
Samantha3379 Posted October 30, 2019 Author Share Posted October 30, 2019 3 minutes ago, e2astudio said: Have you enabled captions? I don't see any... Should be enabled now! Link to comment
Samantha3379 Posted October 30, 2019 Author Share Posted October 30, 2019 Also looking to decrease opacity of caption font if anyone knows how to do that ! Link to comment
e2astudio Posted October 30, 2019 Share Posted October 30, 2019 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
Samantha3379 Posted November 5, 2019 Author Share Posted November 5, 2019 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
EmmaGusco Posted January 27, 2020 Share Posted January 27, 2020 Hello! This was really helpful thank you, but I was wondering if anyone knows how to change the font of the hover description? Thanks! Link to comment
e2astudio Posted January 27, 2020 Share Posted January 27, 2020 To change the font size and weight, use the following: .collection-type-gallery #slideshow .image-description { font-size: 16px; font-weight: 700; } Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.