Jump to content

Text change to image on hover

Go to solution Solved by paul2009,

Recommended Posts

  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
On 4/27/2022 at 3:14 AM, LouisLiase said:

I would like to enquire about the website listed above. How do I make a text subsection change to an image on hover? Further, how can I do this over a background image?

This site was built using the index pages feature on the Tremont template family (Camino, Carson, and Henson, and Tremont) on Squarespace 7.0. Tremont index pages create a slideshow of full-bleed images. Each page in the index becomes a slide that displays when you hover over its menu link:

image.thumb.gif.ee300d3fd917fbeca849f2a560764aea.gif

It is also available on Squarespace 7.1 using a Portfolio page. If you've already starting building a site on Squarespace 7.1, you can create a page like this by going to the PAGES panel and adding a new Portfolio page like this:

image.thumb.png.58700fc33bd2ed6f31a68e14125ea154.png

If you don't see the same initial style, click Edit Section and choose Hover: Background to display the subpage titles so that when you hover over a title, the sub-page featured image replaces the section background:

image.png.26260e045763ee9f03981de88f099e77.png

image.thumb.png.5d2a47f5537059f47be39463c3e4b810.png

If you haven't started building a site yet you can start a 7.1 trial using the Zion starting point, as this features a portfolio page on the homepage.

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009
edited for clarity

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
  • 2 weeks later...
  • 1 month later...

Hey
I have the Version 7.1. Unfortunately this template is not more available in 7.0, so the text subsection change to an image on hover is not possible in the new Version. Is there another way to still include this (via coding) or so. I'm an absolute beginner, so maybe you have a link to a tutorial of how I can do this.

Thank you 

Link to comment
On 6/13/2022 at 2:43 PM, Marcel said:

I have the Version 7.1. Unfortunately this template is not more available in 7.0

The Squarespace 7.0 Tremont template is still available, but the feature has also been added to Squarespace 7.1. See my post above.

Edited by paul2009

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
  • 1 month later...
1 hour ago, MrScribble said:

thoughts on...how to approach [this in 7.1] would be appreciated

I've added some screenshots to my post above.

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

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