Jump to content

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

By chaiseetbercante, in Images & Videos

Go to solution Solved by paul2009,

Recommended Posts

chaiseetbercante Level 2

chaiseetbercante

Posted
Posted (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 by chaiseetbercante
Link to comment
  • Replies 5
  • Views 2.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

paul2009
paul2009

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

paul2009
paul2009

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 ex

Posted Images

paul2009 Level 17

paul2009

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
chaiseetbercante Level 2

chaiseetbercante

Posted
  • Author
Posted
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 Level 17

paul2009

Posted
Posted
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 me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • Solution
paul2009 Level 17

paul2009

Posted
  • Solution
Posted
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  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources