CamillaAAA Posted August 27, 2021 Share Posted August 27, 2021 Site URL: https://anders-bundgaard-film.squarespace.com/work/ I would like to darken the images in the gallery on hover even more than what they are now. I'm in the Brine template. Any help would be appreciated! Thanks! 🙂 Site: https://anders-bundgaard-film.squarespace.com/work/ Code: Andersweb Link to comment
tuanphan Posted August 30, 2021 Share Posted August 30, 2021 On 8/27/2021 at 8:58 PM, CamillaAAA said: Site URL: https://anders-bundgaard-film.squarespace.com/work/ I would like to darken the images in the gallery on hover even more than what they are now. I'm in the Brine template. Any help would be appreciated! Thanks! 🙂 Site: https://anders-bundgaard-film.squarespace.com/work/ Code: Andersweb You mean Hover image (on Work page) > Show black overlay + White title? 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
CamillaAAA Posted August 30, 2021 Author Share Posted August 30, 2021 3 hours ago, tuanphan said: You mean Hover image (on Work page) > Show black overlay + White title? Yes, exactly! Right now the images in the gallery have a minimal black overlay, which is just from the Squarespace settings. I would like the overlay to be darker. Thanks! Link to comment
tuanphan Posted August 31, 2021 Share Posted August 31, 2021 15 hours ago, CamillaAAA said: Yes, exactly! Right now the images in the gallery have a minimal black overlay, which is just from the Squarespace settings. I would like the overlay to be darker. Thanks! Try adding this to Design > Custom CSS article.Index-gallery-item:hover figure:after { background-color: rgba(0,0,0,0.5); display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }  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
CamillaAAA Posted August 31, 2021 Author Share Posted August 31, 2021 7 hours ago, tuanphan said: Try adding this to Design > Custom CSS article.Index-gallery-item:hover figure:after { background-color: rgba(0,0,0,0.5); display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }  It worked!! Thank you!! 🙂 Link to comment
CamillaAAA Posted September 23, 2021 Author Share Posted September 23, 2021 On 8/31/2021 at 6:20 AM, tuanphan said: Try adding this to Design > Custom CSS article.Index-gallery-item:hover figure:after { background-color: rgba(0,0,0,0.5); display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }  Hi tuanphan, This worked so well, but after I've been finishing the design on the site the black overlay stopped working. Do you have any idea why it's not working anymore? I really appreciate your help! I'm looking to do this: Hover image (on Work page) > Show black overlay + White title. URL: https://anders-bundgaard-film.squarespace.com/work Password: Anders Thank you!! Link to comment
tuanphan Posted September 24, 2021 Share Posted September 24, 2021 On 9/24/2021 at 1:08 AM, CamillaAAA said: Hi tuanphan, This worked so well, but after I've been finishing the design on the site the black overlay stopped working. Do you have any idea why it's not working anymore? I really appreciate your help! I'm looking to do this: Hover image (on Work page) > Show black overlay + White title. URL: https://anders-bundgaard-film.squarespace.com/work Password: Anders Thank you!! Try this code article.Index-gallery-item:hover a:after { background-color: rgba(0,0,0,0.5); display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }  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
CamillaAAA Posted September 27, 2021 Author Share Posted September 27, 2021 On 9/25/2021 at 1:58 AM, tuanphan said: Try this code article.Index-gallery-item:hover a:after { background-color: rgba(0,0,0,0.5); display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }  Thank you! 🙂 The black overlay is back, but now the white text is behind the overlay and there's a black box behind the text. You can see it on the attached screenshot. Do you have an idea of why it's happening?  Link to comment
tuanphan Posted September 29, 2021 Share Posted September 29, 2021 On 9/27/2021 at 4:01 PM, CamillaAAA said: Thank you! 🙂 The black overlay is back, but now the white text is behind the overlay and there's a black box behind the text. You can see it on the attached screenshot. Do you have an idea of why it's happening?  Don't remove any code Add this CSS h2.Index-gallery-item-content-heading { position: relative; z-index: 30000000; }  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
CamillaAAA Posted September 29, 2021 Author Share Posted September 29, 2021 @tuanphan thank you! The text is correct now, but there's still a black box behind the text. Any idea why? Thank you so much for your help! Link to comment
tuanphan Posted October 2, 2021 Share Posted October 2, 2021 On 9/29/2021 at 5:15 PM, CamillaAAA said: @tuanphan thank you! The text is correct now, but there's still a black box behind the text. Any idea why? Thank you so much for your help! Try editing this code article.Index-gallery-item:hover a:after { background-color: rgba(0,0,0,0.5); display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } to this article.Index-gallery-item:hover a.Index-gallery-item-image:after { background-color: rgba(0,0,0,.5); display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }  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
CamillaAAA Posted October 5, 2021 Author Share Posted October 5, 2021 @tuanphan it works! THANK YOU for all of your help! :):) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.