Jump to content

Text change to image on hover

By LouisLiase, in Customize with code

Go to solution Solved by paul2009,

Recommended Posts

  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

  • Solution
paul2009 Level 17

paul2009

Posted
  • Solution
Posted (edited)
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: 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
  • 2 weeks later...
  • 1 month later...
Marcel Level 1

Marcel

Posted
Posted

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
paul2009 Level 17

paul2009

Posted
Posted (edited)
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: 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
  • 1 month later...
paul2009 Level 17

paul2009

Posted
Posted
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: 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

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