Jump to content

Custom CSS for Index Page

Recommended Posts

Site URL: https://saramorawetz.com


I want to create custom CSS code for an Index page – effectively allowing me to have two indexes that behave differently.

I want one of the indexes to remain as it is currently configured on my website: saramorawetz.com – allowing for text on roll over (and no image displayed)

For the second index I would like to have images displayed with text on rollover (and image displayed at reduced opacity) 

Ideally I would like both indexes to link to the same pages but will duplicate them if that isn't possible. 

Could anyone assist me with the CSS that I would need to include to achieve this?

Thanks for you help! 

Link to comment
  • Replies 2
  • Views 707
  • Created
  • Last Reply

Hi @tuanphan

So currently there is only one index that is visible on both the Home and the //Projects page.

What I am trying to achieve is keeping a version as it currently is on the Homepage (So it is blank but text appears on rollover) but create a second index that will appear when you click on //Projects that will display images for each page with the name of the page appearing on rollover and the image reducing in opacity. 

The content of both index pages will be identical – I just want them to look visually different (essentially, I love the aesthetics of how it is now but want to make a slightly more user-friendly version visible via projects in case people don't recognise there is viewable content on rollover -- does that makes sense?)

Thanks for your help!


Link to comment


This topic is now archived and is closed to further replies.

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