claudiatinn Posted December 14, 2021 Share Posted December 14, 2021 Hi guys, I hope you can help me. I'm trying to add gradient colours within all my image border frames. I've used this code in CSS to create the silver borders: .design-layout-inline .image-block-wrapper {border: 5px solid #9b9b9b; overflow:visible!important; box-shadow:inset 5px 5px 15px rgba(0,0,0,0.3)} design-layout-inline img {margin-left: 25px; margin-top: 25px; } But I'd like to make them gradient to go from darker silver to nearly white. Can you please help me? Thanks so much! Claudia Link to comment
tuanphan Posted December 17, 2021 Share Posted December 17, 2021 I think you need to use CSS peseudo to add content around image, then you can use CSS background gradient to achieve the request. Can you share link to page in screenshot? We can check easier. claudiatinn 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!) Link to comment
claudiatinn Posted December 17, 2021 Author Share Posted December 17, 2021 Thank you. Attached is the screenshot of the page, although the website is not live yet. Link to comment
tuanphan Posted December 19, 2021 Share Posted December 19, 2021 You can setup an access password (not login password) & then share url, we can check easier claudiatinn 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!) Link to comment
claudiatinn Posted December 27, 2021 Author Share Posted December 27, 2021 Sure, please try: Url - https://mackerel-rhubarb-66cp.squarespace.com/ Pass: Marcus Please let me know if you need anything else. Thanks so much! Link to comment
tuanphan Posted December 28, 2021 Share Posted December 28, 2021 Add this CSS /* Image border gradient */ div#page-section-619b9327f8fb7b60a5a0f5a8 { .image-block-wrapper { position: relative; z-index: 9999; } .image-block-wrapper:before { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background-image: linear-gradient(0deg, red, yellow); }} claudiatinn 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!) Link to comment
claudiatinn Posted December 30, 2021 Author Share Posted December 30, 2021 Amazing! It did work 😀 Thanks so much for your help!! tuanphan 1 Link to comment
Floe Posted January 29 Share Posted January 29 (edited) Hi there. I would really appreciate if anyone could help me solve this too. I wish to make the borders of the three images on the front page of this website: https://chipmunk-iguana-ffam.squarespace.com/ The password is: Hakunamatata12! The outcome should make the borders softer if that makes sense? Thank you so much! - Anja. Edited January 29 by Floe Link to comment
tuanphan Posted February 1 Share Posted February 1 On 1/29/2024 at 3:45 PM, Floe said: Hi there. I would really appreciate if anyone could help me solve this too. I wish to make the borders of the three images on the front page of this website: https://chipmunk-iguana-ffam.squarespace.com/ The password is: Hakunamatata12! The outcome should make the borders softer if that makes sense? Thank you so much! - Anja. Hakunamatata12! password is incorrect. Can you check it again? 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
Floe Posted February 1 Share Posted February 1 2 hours ago, tuanphan said: Hakunamatata12! password is incorrect. Can you check it again? New password: password12 Sorry for the trouble! Link to comment
tuanphan Posted February 4 Share Posted February 4 On 2/1/2024 at 1:19 PM, Floe said: New password: password12 Sorry for the trouble! I remember I sent code in another thread, you try checking it again 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
Create an account or sign in to comment
You need to be a member in order to leave a comment