annaleigh275 Posted December 4, 2020 Share Posted December 4, 2020 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
tuanphan Posted December 6, 2020 Share Posted December 6, 2020 .portfolio-grid-overlay .portfolio-overlay { background-color: #fff !important; } 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
sgreenspan24 Posted March 1, 2021 Share Posted March 1, 2021 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? Link to comment
tuanphan Posted March 3, 2021 Share Posted March 3, 2021 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
petunia4 Posted May 14, 2021 Share Posted May 14, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment