Guest Posted December 8, 2019 Posted December 8, 2019 Hi, I'm trying to create a rollover fade effect on my welcome header banner here https://cheetah-lemon-wxxb.squarespace.com/ The look I'm trying to recreate is just like this non-squarespace website http://harperandharley.com/, is there any way to achieve this look with custom css? I'm going for the same treatment on the text as well as the image. Any help is very much appreciated.
tuanphan Posted December 8, 2019 Posted December 8, 2019 @SabinaP Please setup password & share url again. If you don't know how to. See my signature Private Site This site is currently private. If you’re the owner or contributor, log in. 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!)
Guest Posted December 8, 2019 Posted December 8, 2019 46 minutes ago, tuanphan said: @SabinaP Please setup password & share url again. If you don't know how to. See my signature Private Site This site is currently private. If you’re the owner or contributor, log in. Ah! Bugger. I didn't realise that. Password is sabinajustyna1 Link to site again https://cheetah-lemon-wxxb.squarespace.com/ Thank you.
tuanphan Posted December 8, 2019 Posted December 8, 2019 37 minutes ago, SabinaP said: Ah! Bugger. I didn't realise that. Password is sabinajustyna1 Link to site again https://cheetah-lemon-wxxb.squarespace.com/ Thank you. Private Site This site is currently private. If you’re the owner or contributor, log in. 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!)
Guest Posted December 8, 2019 Posted December 8, 2019 2 minutes ago, tuanphan said: Private Site This site is currently private. If you’re the owner or contributor, log in. Eek! Try again? I thought I saved the new settings. I've just made sure of it.
tuanphan Posted December 8, 2019 Posted December 8, 2019 3 minutes ago, SabinaP said: Eek! Try again? I thought I saved the new settings. I've just made sure of it. You mean banner image below "Branding for you with strategy and style"? Seems difficult, it same background image 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!)
Guest Posted December 8, 2019 Posted December 8, 2019 1 minute ago, tuanphan said: You mean banner image below "Branding for you with strategy and style"? Seems difficult, it same background image Thank you for your response. Yes, the banner image behind "Branding for you with strategy and style". Perhaps there is another way to do it? I don't mind changing things up to get the same look and effect.
tuanphan Posted December 8, 2019 Posted December 8, 2019 @SabinaP Add to Home > Design > Custom CSS /* Set overlay background - Hidden */ section#welcome:before { content: ""; background: rgba(0,0,0,0.5); display: block; width: 100%; height: 100%; position: absolute; opacity: 0; } /* Show overlay */ section#welcome:hover:before { opacity: 0.5; } 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!)
Guest Posted December 8, 2019 Posted December 8, 2019 6 minutes ago, tuanphan said: @SabinaP Add to Home > Design > Custom CSS /* Set overlay background - Hidden */ section#welcome:before { content: ""; background: rgba(0,0,0,0.5); display: block; width: 100%; height: 100%; position: absolute; opacity: 0; } /* Show overlay */ section#welcome:hover:before { opacity: 0.5; } Hmm, I have done that. It nearly mimics the same effect, but not quite there yet.
Guest Posted December 8, 2019 Posted December 8, 2019 @tuanphan I changed the colour in your code and it's looking very similar now, thank you, I really like it. Is there a way to hide/reveal the text on rollover too?
tuanphan Posted December 8, 2019 Posted December 8, 2019 @SabinaP Remove code I sent, and use this section#welcome:before { content: ""; background: rgba(255,255,255,0.7); display: block; width: 100%; height: 100%; position: absolute; opacity: 0; visibility: hidden; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; } section#welcome:hover:before { opacity: 1; visibility: visible; } /* Hide text on hover */ section#welcome:hover .sqs-block-content * { visibility: hidden; } 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!)
Guest Posted December 8, 2019 Posted December 8, 2019 @tuanphan Thank you! Eep, I was aiming for the opposite effect, my apologies, I wasn't clear. It would be cool to have the text visible on hover.
tuanphan Posted December 8, 2019 Posted December 8, 2019 2 hours ago, SabinaP said: @tuanphan Thank you! Eep, I was aiming for the opposite effect, my apologies, I wasn't clear. It would be cool to have the text visible on hover. Okay. Use this section#welcome:before { content: ""; background: rgba(255,255,255,0.7); display: block; width: 100%; height: 100%; position: absolute; opacity: 0; visibility: hidden; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; } section#welcome:hover:before { opacity: 1; visibility: visible; } /* Hide text on hover */ section#welcome .sqs-block-content * { visibility: hidden; } section#welcome:hover .sqs-block-content * { visibility: visible; } 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!)
JonathanPenner Posted February 28, 2021 Posted February 28, 2021 I am new to using code and tried to get this to work on my site. But couldn't. I would love to have this option for a couple of my pages. Where do I put this code. I tried it in Design/Custom CSS and that didn't work. But I also don't know if I need site/page specific info to modify the code. Can you help.
tuanphan Posted March 3, 2021 Posted March 3, 2021 On 3/1/2021 at 5:23 AM, JonathanPenner said: I am new to using code and tried to get this to work on my site. But couldn't. I would love to have this option for a couple of my pages. Where do I put this code. I tried it in Design/Custom CSS and that didn't work. But I also don't know if I need site/page specific info to modify the code. Can you help. Can you share link to your site? We can check easier 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!)
tuanphan Posted March 7, 2021 Posted March 7, 2021 On 3/4/2021 at 12:51 AM, JonathanPenner said: https://lifeapp-7-1.squarespace.com/ Hi. You mean this banner? 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!)
JonathanPenner Posted March 10, 2021 Posted March 10, 2021 Yes, this banner would be one page I would like to be able to have a roll over.
tuanphan Posted March 20, 2021 Posted March 20, 2021 On 3/10/2021 at 9:46 AM, JonathanPenner said: Yes, this banner would be one page I would like to be able to have a roll over. Add to Design > Custom CSS /* Home banner hover */ body.homepage article section:first-child .section-background:after { content: ""; background: rgba(255,255,255,0.7); display: block; width: 100%; height: 100%; position: absolute; opacity: 0; top: 0; left: 0; visibility: visible; -moz-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; z-index: 20000; } body.homepage article section:first-child:hover .section-background:after { opacity: 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!)
Recommended Posts
Archived
This topic is now archived and is closed to further replies.