Jump to content

Removing Overlay on 7.1 Portfolio Hover Background

Recommended Posts

Site URL: https://scaacquisition2020.com

pw:1234

This is making me nuts. I need to remove the image overlay that appears when you hover over the portfolio links on my homepage. There is no setting within the design color editor and I've set all "image overlays" to transparent just to be safe but still can't figure out what the CSS should be to remove this annoying default setting.  

Screen Shot 2020-04-29 at 5.21.37 PM.png

 

EDIT: 

Here is the correct CSS for anyone interested

 

.portfolio-hover-bg-overlay {
  display: none
}

Edited by a-ryann
Found the answer!
Link to comment
  • Replies 25
  • Views 5.4k
  • Created
  • Last Reply

Top Posters In This Topic

3 hours ago, evelynmarinap said:

Hi Tuanphan, I am trying to to get a product image to appear without a hover. 

Similarly to a-ryann's post, the above code removes the image all together. 

I wish for there to be no hover. 

.portfolio-hover-bg-overlay {
  display: none
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
10 hours ago, sjet said:

Me too. Neither of these code snippets works:

NEITHER

.portfolio-hover-bg-OVERLAY {
  display: none
}

NOR

.portfolio-hover-bg-MASK {
  display: none
}

 

try

.portfolio-hover-bg-overlay {
  display: none !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
  • 3 months later...
On 1/14/2021 at 12:10 AM, niketatripp said:

Hello @tuanphan

Do you know how I can get rid of the overlay here https://studioiris.squarespace.com/projects

Thanks!

Add to Design > Custom CSS

.portfolio-hover-bg {
    opacity: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 2/23/2021 at 9:01 AM, zerosite said:

@tuanphan hello, I see you are a squarespace ultra expert. 

I need to add a background image in the portfolio page, where I am using a gallery section , is that possible ?

Im not sure if its a squarespace bug, but natively apparently there isnt a way,

Many thanks and keep up the amazing work. 

Thanks 

Hi. Can you share link to page? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
3 minutes ago, GFN99 said:

Hello! 

Hey guys, is there a way to remove the grey overlay before and during the hovering? I want it to be bright white and have the feeling that people are clicking on my handwriting!  

 

https://www.grahamnielsen.com/work 

 

Ok using the first CSS in this thread I have the overlay removed WHILE hovering and still maintained the ability to change background image. However, I want the overlay before the hovering begins to also be removed. Can anyone help me out?

Link to comment
On 4/13/2022 at 9:03 AM, GFN99 said:

Ok using the first CSS in this thread I have the overlay removed WHILE hovering and still maintained the ability to change background image. However, I want the overlay before the hovering begins to also be removed. Can anyone help me out?

It looks like you solved this?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/18/2022 at 5:39 AM, tuanphan said:

It looks like you solved this?

I resolved it slightly by selecting "keep last selection" when editing the portfolio, but when you load the page it still shows up as grey for a second and then turns white. Is there any CSS that I can use to remove the grey overlay completely so that I do not have to use "keep last selected"? Thanks

Link to comment
  • 4 weeks later...
On 4/18/2022 at 5:39 AM, tuanphan said:

It looks like you solved this?

Hi @tuanphan! Thanks for your help on this topic. When I use the code below the image that's supposed to be featured in the portfolio hover effect disappears altogether. Do you have any other suggestions of selectors? I'm using the portfolio hover follow cursor settings for reference!

.portfolio-hover-bg {
    opacity: 0 !important;
}

 

Link to comment
On 5/14/2022 at 1:51 AM, hannahkruegerstudio said:

Hi @tuanphan! Thanks for your help on this topic. When I use the code below the image that's supposed to be featured in the portfolio hover effect disappears altogether. Do you have any other suggestions of selectors? I'm using the portfolio hover follow cursor settings for reference!

.portfolio-hover-bg {
    opacity: 0 !important;
}

 

Can you share link to portfolio page? We will check it again

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

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

×
×
  • 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.