BadScifi Posted December 16, 2021 Share Posted December 16, 2021 (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! Edited December 16, 2021 by BadScifi Added Mockup Link to comment
paul2009 Posted December 16, 2021 Share Posted December 16, 2021 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
BadScifi Posted December 16, 2021 Author Share Posted December 16, 2021 (edited) Thank you for your reply @paul2009! Here's a link to my website: https://hannahesweet.com/ I haven't coded in a few years so my coding knowledge is a little fuzzy (trying to refresh lol) if you could explain further how I can achieve the desired effect that would be awesome. Edited December 16, 2021 by BadScifi Link to comment
Solution paul2009 Posted December 16, 2021 Solution Share Posted December 16, 2021 (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 */ } If this post has helped you, please click a 'Like' or 'Thanks' icon below ⬇️ Edited December 16, 2021 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
BadScifi Posted December 16, 2021 Author Share Posted December 16, 2021 That worked perfectly, thank you so much for your help! 😄 paul2009 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment