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
  • Views 1.6k
  • Created
  • Last Reply
  • 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

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

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


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.