Kalie Posted June 25, 2021 Share Posted June 25, 2021 Site URL: https://marigold-mouse-h28x.squarespace.com Hi there, I'm still learning my way around CSS and could really use some help. I'd love to make a section of images on the homepage mirror the hover effect that happens on a portfolio page. Does anyone know how to do this? Template: https://growwell-demo.squarespace.com/programs Site Preview: https://marigold-mouse-h28x.squarespace.com Password: Suits Link to comment
tuanphan Posted June 28, 2021 Share Posted June 28, 2021 On 6/25/2021 at 11:11 AM, Kalie said: Site URL: https://marigold-mouse-h28x.squarespace.com Hi there, I'm still learning my way around CSS and could really use some help. I'd love to make a section of images on the homepage mirror the hover effect that happens on a portfolio page. Does anyone know how to do this? Template: https://growwell-demo.squarespace.com/programs Site Preview: https://marigold-mouse-h28x.squarespace.com Password: Suits For this section? Clothing for every occasion, dance move and touchdown celebration. Show title + overlay in center >> If hover, overlay + title disappear? 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
Kalie Posted July 10, 2021 Author Share Posted July 10, 2021 Sorry for the delay! Yes, that's the correct section. I'm trying to mirror the hover effect on the portfolio page (Capsules). Right now, I have the images set to 'poster' and it doesn't provide any hover options. Do I need to format the photos to something else, or is there a way to code this? Link to comment
tuanphan Posted July 11, 2021 Share Posted July 11, 2021 13 hours ago, Kalie said: Sorry for the delay! Yes, that's the correct section. I'm trying to mirror the hover effect on the portfolio page (Capsules). Right now, I have the images set to 'poster' and it doesn't provide any hover options. Do I need to format the photos to something else, or is there a way to code this? Add to Design > Custom CSS /* Posters overlay */ body.homepage .design-layout-poster .image-overlay { background-color: rgba(167, 62, 38, 0.6) !important; opacity: 1 !important; } body.homepage .design-layout-poster:hover figcaption { opacity: 0 !important; } body.homepage .design-layout-poster:hover .image-overlay { 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.