Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

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


nickasbell

Question

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

Edited by nickasbell
Link to comment

13 answers to this question

Recommended Posts

  • 0

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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 🙂

Edited by AlexBillerey
Link to comment
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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;
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...