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
  • Replies 2
  • Views 688
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

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.