Jump to content

Opaque Portfolio Grid Overlay on Hover

Recommended Posts

Site URL: https://www.annawasson.com/

As you can see on my site, when you hover over each portfolio image on the portfolio grid, there is a transparent black overlay with the caption. I have been tinkering with custom CSS to make the overlay a solid color (light blue) with the caption when you hover over it, but I can't seem to make the opacity completely opaque on hover. Let me know if this is possible.

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 months later...
On 3/1/2021 at 10:44 AM, sgreenspan24 said:

Hi, I have the same question but when I tried this it does not change the opacity, only the color. Adding "opacity: 1" seems to change the opacity for the entire block of images at once, not just the one I'm hovering over...any ideas?

Add to Design > Custom CSS

.portfolio-grid-overlay .portfolio-overlay {
    background-color: rgba(255,255,255,0.9) !important;

0.9 is opacity (0 >> 1)

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

Squarespace has this feature built in. You can control the opacity within the Edit Section panel for the particular section. No need to insert custom CSS. 


1. Edit Section



2. Under the Format tab scroll to the bottom and the last setting option is to control the opacity of the overlay. 


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

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.