Guest Posted October 30, 2020 Share Posted October 30, 2020 Site URL: https://www.nickasbell.com PASSWORD: 1234abcd Hello, I was wondering if someone could help me with coding each individual hover color for my projects on my work page. I'm looking to have the hover color match the background color in each project so that it looks more smooth when you hover over it. Also, I was looking to change the font color to white just on the projects, not across the whole site. Thank you! -Nick EXAMPLE PHOTO: the hover is consistent grey throughout, this is what I want to change. 🙂 Link to comment
Beyondspace Posted October 30, 2020 Share Posted October 30, 2020 You can use grid-item url to make different color for them like so .grid-item .portfolio-title { color: #fff !important; } .grid-item:hover .portfolio-overlay { opacity: 0.6 !important; } .grid-item[href*=unfiltered]:hover .portfolio-overlay { background: #ffeb3b; } .grid-item[href*=sodelicious]:hover .portfolio-overlay { background: #A91E63; } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Guest Posted October 30, 2020 Share Posted October 30, 2020 Nick This can be achieved using css nth-child selectors. I've had a look at the css (I just happened to stumble across this forum, so I'm not familiar with the css squarespace). Look for the following bit of bit of code in your css file @ about line 15 which is currently (I've "bolded" the bit you are interested in): .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text { opacity: 1; } It's this bit of code that causes the image to be replaced by the word(s) when you hover. We could just do something like this say: .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text { opacity: 1;background:red /* or whatever color you want */ } Problem is that all of the divs will turn red when hovered over so this is where nth-child selectors come in. Immmediately after the declaration (my emphasis): .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text { opacity: 1; } Add the following 4 "bits of new code" (again my emphasis) .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:nth-child(1):hover .portfolio-text { background:red /* Now only the 1st div that is hovered over will turn red */ } .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:nth-child(2):hover .portfolio-text { background:blue/* Now only the 2nd div that is hovered over will turn blue*/ } .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:nth-child(3):hover .portfolio-text { background:green/* Now only the 3rd div that is hovered over will turn green*/ } .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:nth-child(4):hover .portfolio-text { background:yellow/* Now only the 4th div that is hovered over will turn yellow*/ } Obviously if you added a fifth or sixth etc new elements then you would have to add additional declarations for these new elements. Also feel free to change my chosen colors to the correct colors 🙂 I avoided using the !important declaration to achieve what you want, because as said I am not familar with the code base and the !important declaration might cause "unintended consequences" elsewhere on your site as it will over-write other declarations within the css. I hope this helps (sorry for the length of the reply and apologies if the language/tone is a tad simplistic - I like explanations that 6yr olds can follow and I tend to assume others do too 🙂 ) Good luck and if you get stuck shout me 🙂 Link to comment
Guest Posted October 30, 2020 Share Posted October 30, 2020 @bangank36worked perfectly! thank you so much!! Link to comment
Guest Posted October 30, 2020 Share Posted October 30, 2020 @bangank36 I just realized that when I move off the hover with the new colors, it does a quick flash over the project, I was wondering if there was a way to make this a seamless transition so that it looked smoother? Link to comment
Beyondspace Posted October 30, 2020 Share Posted October 30, 2020 Just now, nickasbell said: @bangank36 I just realized that when I move off the hover with the new colors, it does a quick flash over the project, I was wondering if there was a way to make this a seamless transition so that it looked smoother? Can be, I will update in morning BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Guest Posted October 30, 2020 Share Posted October 30, 2020 @bangank36 thank you, I appreciate your help greatly! Link to comment
Guest Posted November 3, 2020 Share Posted November 3, 2020 @bangank36 were you able to see if there was a way to fix the hover error? If you're too busy or don't have time to, I completely understand, just curious! 🙂 Link to comment
Beyondspace Posted November 3, 2020 Share Posted November 3, 2020 1 hour ago, nickasbell said: @bangank36 were you able to see if there was a way to fix the hover error? If you're too busy or don't have time to, I completely understand, just curious! 🙂 Try this, it's my mistake .grid-item .portfolio-title { color: #fff; } .grid-item .portfolio-overlay { opacity: 0; -webkit-transition: opacity 0.75s; -o-transition: opacity 0.75s; transition: opacity 0.75s; } .grid-item:hover .portfolio-overlay { opacity: 1; } .grid-item[href*=unfiltered] .portfolio-overlay { background-color: #ffeb3b; } .grid-item[href*=sodelicious] .portfolio-overlay { background-color: #A91E63; } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Guest Posted November 3, 2020 Share Posted November 3, 2020 @bangank36 you're more than okay! thank you so much for your help! It looks like it works perfectly in the code, but for some reason after I save the code and load the webpage, there are no colors showing at all! Link to comment
Beyondspace Posted November 3, 2020 Share Posted November 3, 2020 15 minutes ago, nickasbell said: @bangank36 you're more than okay! thank you so much for your help! It looks like it works perfectly in the code, but for some reason after I save the code and load the webpage, there are no colors showing at all! Please add .light to the color code position: BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Guest Posted November 3, 2020 Share Posted November 3, 2020 @bangank36 you're a life saver! thank you so much!!! 😁❤️ Link to comment
Beyondspace Posted November 3, 2020 Share Posted November 3, 2020 2 minutes ago, nickasbell said: @bangank36 you're a life saver! thank you so much!!! 😁❤️ Sorry it's taken a while to get back, been busy building my blog BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Guest Posted November 3, 2020 Share Posted November 3, 2020 6 minutes ago, bangank36 said: Sorry it's taken a while to get back, been busy building my blog No need to apologize, I couldn't be more thankful for the free help, I understand you're taking time from your day 🙂 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.