JuniperDewdrop Posted January 7, 2022 Share Posted January 7, 2022 Hey Everyone! I'm trying to add a drop shadow to an image that is embedded in an image card. I have some custom code I'm using, and it looks really great on the image, but it is also adding the shadow to the text which looks really bad. Any help I could get with adding just the shadow to the image would be awesome! Thanks so much have a fantastic day! Here's the code I'm using: #block-3dab5bfd65b7b9ce7990 { filter: drop-shadow(15px 15px 5px #a0a0a0); } Link to comment
tuanphan Posted January 8, 2022 Share Posted January 8, 2022 Can you share link to page where you use image block? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
JuniperDewdrop Posted January 8, 2022 Author Share Posted January 8, 2022 Hey @tuanphan, My site is JuniperDewdrop.com Password: penguin It's the second image block card on the home page: About Mike Thanks so much for your help!! Link to comment
tuanphan Posted January 10, 2022 Share Posted January 10, 2022 On 1/9/2022 at 4:40 AM, JuniperDewdrop said: Hey @tuanphan, My site is JuniperDewdrop.com Password: penguin It's the second image block card on the home page: About Mike Thanks so much for your help!! Remove your code & use this new code div#block-3dab5bfd65b7b9ce7990 .image-inset { filter: drop-shadow(15px 15px 5px #a0a0a0); } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
JuniperDewdrop Posted January 10, 2022 Author Share Posted January 10, 2022 Hey @tuanphan, That drop shadow looks really beautiful thanks! Unfortunately, I also have some code that makes the button underneath the picture to expand on hover. If you check that out, the animation interferes with the picture drop shadow. Do you have a coding solution for that? Or would it be better to add a spacer underneath the picture?? Thanks so much! Link to comment
tuanphan Posted January 12, 2022 Share Posted January 12, 2022 On 1/11/2022 at 3:39 AM, JuniperDewdrop said: Hey @tuanphan, That drop shadow looks really beautiful thanks! Unfortunately, I also have some code that makes the button underneath the picture to expand on hover. If you check that out, the animation interferes with the picture drop shadow. Do you have a coding solution for that? Or would it be better to add a spacer underneath the picture?? Thanks so much! Add to Design > Custom CSS /* image shadown conflict button */ .image-block { position: relative; z-index: 9999999999999999999; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
JuniperDewdrop Posted January 13, 2022 Author Share Posted January 13, 2022 Thank you so much @tuanphan!!! Epic solution. Everything works perfectly, just as I was hoping it would. I have seen you help so many people on this forum. I deeply want to thank you, and let you know how much of an impact you have made for so many people. Have a fantastic day :) Twinkle, tuanphan and juliaprather 3 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