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

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:

Are the backgrounds not set up currently on your page?

Try this:

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

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.

The backgrounds still are not showing up for me.

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?

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 */

Done - do you see the images now?

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?

I'm using markdown components for most of my text elements, but nothing crazy - just some color overrides for certain characters.

So it kind of works on my phone, but not really.

It 100% works on my laptop while using the touch screen.

It does not work at all with the mouse.

Tested in both firefox and edge, same results.

I'm looking through my files and my images are all pretty massive - I'm optimizing them all for web now.

I just updated the homepage and the first project with images all under 500kb (some of them were over 7MB...)

Hoping that solves it. Would you mind checking one more time? 

Same result here.

Not sure why, because it works if I long press the touch screen. Nothing with the mouse.

Edit, I have been checking in incognito/private windows too, so its a full refresh with no caching.