Jump to content

Different (solid) hover colors on portfolio page

Recommended Posts

Site URL: https://www.mano-nina.com

Website: https://www.mano-nina.com

Password: sqWebsite!21

 

Hi!

 

As you can see on my website the hover turns into grey. But I would like to change each hover in a different solid color. For example the first one at the left into the yellow background color. The second one at the right into a beige solid  background color, and so on.. Does someone knows a costum CSS for this? You would do me a big favor because I cannot figure it out.

Link to comment
1 hour ago, manomina said:

Site URL: https://www.mano-nina.com

Website: https://www.mano-nina.com

Password: sqWebsite!21

 

Hi!

 

As you can see on my website the hover turns into grey. But I would like to change each hover in a different solid color. For example the first one at the left into the yellow background color. The second one at the right into a beige solid  background color, and so on.. Does someone knows a costum CSS for this? You would do me a big favor because I cannot figure it out.

You can use this method to update the color, add as many as custom color you need, the nth-child(1) and nth-child(2) indicate to the first and second of the grid item

[data-section-id="5f5696df020c314b1ffd461a"] .grid-item:nth-child(1) .portfolio-overlay {
    background-color: #b8d7cc;
}
[data-section-id="5f5696df020c314b1ffd461a"] .grid-item:nth-child(2) .portfolio-overlay {
    background-color: #3f51b5;
}

image.thumb.png.824019108740bf4d342472507c078e62.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.