Jump to content

Portfolio Hover Background change text color on hover

Recommended Posts

Site URL: https://rust-turquoise-r7pa.squarespace.com/

https://rust-turquoise-r7pa.squarespace.com/

I am trying to change the text color or the background of the text on hover on my portfolio page.  I just added a new image which is much brighter than the other 2 darker images displayed on the other hovers.  My initial thought was to either have the font color change on hover or have the background of the text change on hover.  If there is a more elegant solution which doesn't require me to change my overall color theme I am open to suggestions.

I attempted a few different lines of code but I am unsure of what I am doing with css, it has been a very long time since I've dabbled.
The code following that I have tried I have changed to suit my needs in terms of colors/font families, these are just copy/pastes from other posts on these forums and I am too lazy to change everything to my theme again.  If I can just be pointed into the classes/families that I need to adjust with an example I can make it my own in terms of specific colorations.
Things I have tried (there may have been others but I can't find them in my history right now):

changing h3 to 1 or 2 for different header types

h3.portfolio-title {
    font-family: monospace !important;
    color: red !important;
    font-size: 30px !important;
}

I know this is opacity but this got me the closest.  I removed opacity modifiers and removed one of the
lines (don't remember which exactly) and I was able to get a background-color:000000 to work but it only
had the background color for as long as the transition occurred between images on my page.

ul.portfolio-hover-items-list:hover li {
    opacity: 0;
}
ul.portfolio-hover-items-list:hover li:hover {
    opacity: 1;
}
Edited by CatchingRays
accidently posted without finishing post
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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