Jump to content

[Pazari Template] Help Changing Individual Hover Colors & Font Color?

Recommended Posts

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. 🙂

Screen Shot 2020-10-30 at 4.26.31 AM.png

Screen Shot 2020-10-30 at 4.26.38 AM.png

Link to comment
  • Replies 13
  • Views 1.7k
  • Created
  • Last Reply

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;
}

image.thumb.png.15018635de722b715ffbdae11bf42ce5.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

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

@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
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 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
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 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
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: 

image.png.610537ac65ddb1b4b13235d63f594cab.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
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 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
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

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.