chaiseetbercante Posted January 7 Share Posted January 7 (edited) When I was on the 7.0 plateform, I was using the image gallery block and I was able to add a text on hover. I'm not sure if I can do it on 7.1. Or if it is possible to have simply a text over image on a gallery block, that could be perfect! How can I do that on SQSP 7.1? Edited January 7 by chaiseetbercante Link to comment
paul2009 Posted January 7 Share Posted January 7 32 minutes ago, chaiseetbercante said: When I was on the 7.0 platform, I was using the image gallery block and I was able to add a text on hover. I'm not sure if I can do it on 7.1. You'll find fewer and fewer new websites use hover effects; on all platforms, not just Squarespace. This is because changes in technology - the popularity of mobile devices - are reshaping the user experience. It is better not to use hover effects unless they are required for desktop visitors and you have an alternative design for your mobile users that does not rely on hover effects. Why? Because hover effects don't work on mobiles*. Hovering occurs when a visitor puts their cursor over an element but touchscreen devices don't have a cursor. This means that if you add a hover title to an image, your mobile users may never see it. When you take into account that around 65%-80% of visits to Squarespace websites are now made on mobile devices, you can see how relying on hover effects could make your site unusable for more than half of your visitors. *Some mobiles can simulate hovering by first triggering a hover state and then triggering a "click". However this "stickiness" can not only confuse visitors, it can also frustrate them when they are required to tap twice to "click" the element. Did this help? Please give feedback by clicking an icon below ⬇️ creativenap and chaiseetbercante 2 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
chaiseetbercante Posted January 7 Author Share Posted January 7 42 minutes ago, paul2009 said: You'll find fewer and fewer new websites use hover effects; on all platforms, not just Squarespace. This is because changes in technology - the popularity of mobile devices - are reshaping the user experience. It is better not to use hover effects unless they are required for desktop visitors and you have an alternative design for your mobile users that does not rely on hover effects. Why? Because hover effects don't work on mobiles*. Hovering occurs when a visitor puts their cursor over an element but touchscreen devices don't have a cursor. This means that if you add a hover title to an image, your mobile users may never see it. When you take into account that around 65%-80% of visits to Squarespace websites are now made on mobile devices, you can see how relying on hover effects could make your site unusable for more than half of your visitors. *Some mobiles can simulate hovering by first triggering a hover state and then triggering a "click". However this "stickiness" can not only confuse visitors, it can also frustrate them when they are required to tap twice to "click" the element. Did this help? Please give feedback by clicking an icon below ⬇️ Ok, I understand. Is there a way I can put some text over images in my gallery block? Actually, the text/title goes under the image, and it is very ugly... Link to comment
paul2009 Posted January 7 Share Posted January 7 1 hour ago, chaiseetbercante said: Is there a way I can put some text over images in my gallery block? Can you provide us with a link to the page? If the site isn’t live, please see How to Post a Forum Question for guidance on how to provide a link. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
chaiseetbercante Posted January 7 Author Share Posted January 7 18 minutes ago, paul2009 said: Can you provide us with a link to the page? If the site isn’t live, please see How to Post a Forum Question for guidance on how to provide a link. The page and gallery block I was talking about is on the homepage > www.maxpoisson.com Link to comment
Solution paul2009 Posted January 8 Solution Share Posted January 8 17 hours ago, chaiseetbercante said: Is there a way I can put some text over images in my gallery block? Yes, sure @chaiseetbercante. Here's an example: To achieve something like this, first enable the Captions in the Gallery Section editor: Then add the following to Design > Custom CSS: /************************************** Move the Gallery Grid caption from below the image to centered on the image **************************************/ figure.gallery-grid-item { position: relative!important; } figcaption.gallery-caption.gallery-caption-grid-simple { position: absolute!important; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; } /* Set color & size of caption font */ p.gallery-caption-content { color: white; font-size: 2rem!important; } This will centre the captions, increase the font-size and set the color to white (see last few lines). Depending on the colour of the images and the caption colour that you choose, the captions may not be easy to read: To resolve this you can add a drop shadow: To do this, add something like this to the end of the custom CSS: /* Optional drop shadow */ p.gallery-caption-content { text-shadow: 2px 2px 4px #000; } If you would prefer an overlay behind the caption like this: add the following instead of the drop shadow CSS: /* Optional background */ figcaption.gallery-caption.gallery-caption-grid-simple { background: rgba(0,0,0,0.2); max-width:80%; padding: 17px; } I hope this helps. Did this help? Please give feedback by clicking an icon below ⬇️ hartmani and chaiseetbercante 2 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment