Custom CSS for Index Page

Site URL: https://saramorawetz.com

Hello,

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! 

Which index: hover effect?

Which index: reduce opacity, image display?

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!

Sara