Jump to content

Changing the active/hover color on Hawley portfolio from black to white

Recommended Posts

Site URL: https://rachelswafford.com/

I've seen a few posts about this, but never the solution to my current issue - hoping someone can help.

I'm using Hawley, and I've selected the Hover:Background variant for my homepage. My site is white with black text by default, and when I hover over the  different projects, I want the text to ALL be white.

I can get the text to be black while on white OR white while over the image, but never at the same time. 

I've tried every variation of this code snippet I could think of:

[data-active="false"] span.portfolio-hover-item-content { color: #000000;}
[data-active="true"] span.portfolio-hover-item-content {color: #FFFFFF;}

I've tried switching the order. I've tried adding !important (on one, on the other, on both)... I cannot figure this out.

Desired inactive and active states below:



Link to comment
  • Replies 11
  • Views 722
  • Created
  • Last Reply
17 minutes ago, rwp said:

Are the backgrounds not set up currently on your page?

Try this:

.portfolio-hover-items-list:hover span.portfolio-hover-item-content {
    color: #fff;


It worked!!! thank you so much - this has been driving me insane.

It's possible the backgrounds weren't set up when you looked, I've been testing different code options for the last hour or so - it's all up now.

Link to comment
11 minutes ago, rwp said:

The backgrounds still are not showing up for me.

Are you in Safari? I just checked and apparently NONE of the images are showing up across my entire site. 

I've been testing in Chrome and it all works fine.


**Update: I cleared my cache in Safari and it all loaded fine. Should I be concerned about other potential Safari users not being able to view my site properly?

Link to comment

I am on firefox.

Temporarily comment out all of your custom css to see if the issue is in there.

CSS can be commented out by putting /* in front of the css and */ at the end

/* This is my custom css

This is my custom css

This is my custom css

This is my custom css

This is my custom css */

Link to comment
1 minute ago, RachelSwafford said:

Done - do you see the images now?

I do not, and unfortunately I do not know enough about that theme to have any idea why they are not showing.

You can remove the comments from your CSS though, that's not the issue.

Are you using any other custom coding anywhere on your page?

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.