Jump to content

How to have a text on hover on a gallery block in SQSP 7.1 ?

Go to solution Solved by paul2009,

Recommended Posts

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 by chaiseetbercante
Link to comment
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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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
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.  

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • Solution
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:

gallery-section-titles-on-images.thumb.png.87ccb562172301778d27eca8cce22165.png

To achieve something like this, first enable the Captions in the Gallery Section editor:

image.gif.4278c837343e94f3a88ab43a0dc19827.gif

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:

image.thumb.png.0a2ebaf3de694404d4ec78a94a867008.png

To resolve this you can add a drop shadow:

image.thumb.png.818638e01cb1834bd46e358aff33260b.png

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:

image.thumb.png.1d60c58b7e4f6dbd9044d844c653347f.png

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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.