BarbaraD

That did the trick. It's working perfectly now. Thank you for being so helpful, it is much appreciated!

Thanks for the suggestion mudebbela, I tried !important there but no change. Site is https://beaver-creek-industries.squarespace.com/ PW: beavercreek This page works, with an opacity layer on hover with text remaining white: https://beaver-creek-industries.squarespace.com/featured-projects But on individual portfolio pages with gallery grids, the text darkens on hover along with the opacity: https://beaver-creek-industries.squarespace.com/featured-projects/healthcare

Revised CSS below with different rules for the gallery grid on a portfolio page and on a regular page with a gallery grid. Everything's working now with one outstanding issue: the background opacity on hover for gallery images on pages also darkens the text (screenshot 2), where I can keep the text white on hover for the portfolio page gallery images (screenshot 1) and haven't been able to solve this. Any input is appreciated. /* Grid Gallery Captions */ .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; height: 100%; background: rgba(0,0,0,0.1); // overlay color padding: 0; opacity: 1; pointer-events: none; //controls if the image link works - auto breaks link } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; // center caption box vertically justify-content: center; // center caption box horizontally } .gallery-grid .gallery-caption-content { font-size: 3.2rem !important; // caption font size font-weight: 700 !important; color: white; //caption font color padding: 1vw; // padding around the caption text-align: center; // center text within caption box } .gallery-grid-item { position: relative; } /* Portfolio Main page grid item hover */ /* Keep portfolio item overlay text from disappearing on hover KEEP THIS */ .portfolio-grid-overlay .grid-item .portfolio-text:hover { opacity: 1 !important; background: rgba(0,0,0,0.2) !important; // overlay color } /* Hover */ /* Grid Gallery Captions on Hover KEEP THIS */ .gallery-grid .gallery-caption:hover { background: rgba(0,0,0,0.2) !important; // overlay color opacity: 1; z-index: 1000; pointer-events: inherit; } /* Different CSS for gallery grid images on pages that are not portfolio pages */ figure.gallery-grid-item .gallery-grid-image-link:after { content: ""; background-color: rgba(0,0,0,0.2); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; opacity: 0; transition: all 0.2s ease; } figure.gallery-grid-item:hover .gallery-grid-image-link:after { opacity: 1; transition: all 0.2s ease; } .gallery-caption-grid-simple { transition-delay: 1ms; transition: all 0.2s ease; max-width: unset; } /* Trying to keep caption text above the opacity color on hover NOT WORKING */ .gallery-grid-item .gallery-caption:hover { opacity: 1 !important; }

I have galleries on portfolio pages with captions changed to overlay text using the CSS below. The text is static (does not disappear or appear on hover), and I want an opacity effect to show on hover to indicate the image is a clickable link. This works on the main portfolio page, but it does not work for the galleries on individual portfolio item pages. The problem is, when I add the opacity layer, the gallery image on the portfolio item page is no longer clickable, the link is broken. Hoping for some input on this! /* Grid gallery captions text overlay with opacity change on hover */ .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0); // overlay color height: 100%; padding: 0; opacity: 0; pointer-events: none; } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; // center caption box vertically justify-content: center; // center caption box horizontally } .gallery-grid .gallery-caption-content { font-size: 3.2rem !important; // caption font size font-weight: 700 !important; color: white; //caption font color padding: 1vw; // padding around the caption text-align: center; // center text within caption box } .gallery-grid-item { position: relative; } .gallery-grid-item .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; max-width: unset; } /* Hover */ /* Grid gallery captions on Hover */ .gallery-grid .gallery-caption:hover { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.2); // overlay color height: 100%; padding: 0; opacity: 0; pointer-events: auto; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } /* Portfolio item page grid gallery image hover */ /* Keep portfolio item image overlay text on hover */ .portfolio-grid-overlay .grid-item .portfolio-text:hover { opacity: 1 !important; } /* opacity hover effect - not working*/ .portfolio-grid-overlay .grid-item :hover { background: rgba(0,0,0,0.2); // overlay color }

Got it, thanks again.

I just set the section hight to small and the width to Large and the padding is reduced. Just needed the correct combination of settings: https://translegal-llc.squarespace.com/home-3 Would like to reduce the space above and below the slider even more, but am thinking that the way gallery sections work in 7.1 I am stuck with the default minimum space (10) between sections. Am still learning how to target sections, so thanks for showing me how to use the [data-section-id=""]

Yes, sorry. Password is: t\

Site URL: https://translegal-llc.squarespace.com/ Hi, Am having no luck writing CSS to target a section in 7.1 to reduce the space above and below this image in a gallery section (screenshot). Would love some help! Thanks, Barbara