Jump to content

Changing hover effect on individual images on grid

By BadScifi, in Customize with code

Go to solution Solved by paul2009,

Recommended Posts

BadScifi Level 4

BadScifi

Posted
Posted (edited)

I currently have a grid of thumbnail images on the home page of website that links to other pages. (this is a graphic design portfolio website)
I have a color overlay hover effect on the images, so when you hover over the image it turns the image a solid blue shade. 
I would like to change this so each image has a different hover color instead of just one color.

Would anyone be able to tell how I can achieve this effect? I've attached a quick example of the effect I'm trying to achieve if that helps.

Thank you!
 

mockup1.jpg

Edited by BadScifi
Added Mockup
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

BadScifi
BadScifi

That worked perfectly, thank you so much for your help! 😄

Posted Images

paul2009 Level 17

paul2009

Posted
Posted

It's possible to do this by specifying different colours for the different elements by using nth selector like nth-of-type or nth-child. If you need more specific help, you'll to allow us to view the page.

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
  • Solution
paul2009 Level 17

paul2009

Posted
  • Solution
Posted (edited)

Here's an example for the first two items on the page. Add this to Design > Custom CSS and add further entries for each grid item: 

/* Change Grid Item Hover Colors */
.portfolio-grid-overlay .grid-item:nth-of-type(1) .portfolio-overlay {
  background-color: #5FBB8D; /* green */
}
.portfolio-grid-overlay .grid-item:nth-of-type(2) .portfolio-overlay {
  background-color: #649EF7; /* blue */
}

grid-item-hover.gif.f6966867151fa57fcbaeb6e53bb3bbd4.gif

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Edited by paul2009

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources