TigerLily67 Posted June 18 Share Posted June 18 (edited) Hi! I'd like to apply the same box-shadow to every image shape, but I cannot figure out the driving element. As you can see in the attached image, I was able to use this and style the list easily. I also applied it to the map code block. .user-items-list-simple .list-item-media-inner[data-aspect-ratio="circle"] { -webkit-box-shadow:10px 7px 0 -2px #c8cda3; box-shadow: 10px 7px 0 -2px #c8cda3; padding-bottom: 100%; padding-right: 100%; border-radius: 50%; } However, I could not figure out how to apply it to images within shapes. I tried this: .fluid-image-container .sqs-image-content { box-shadow: 10px 7px 0 -2px #c8cda3; } Site link: https://corn-ferret-28x9.squarespace.com/home pw: Zippy12345 Any help would be appreciated. If there is a cleaner way to do it, I'm open to suggestions. Edited June 18 by TigerLily67 added more tags Link to comment
tuanphan Posted June 20 Share Posted June 20 Try this .image-block-outer-wrapper { box-shadow: 10px 7px 0 -2px #c8cda3; border-radius: 50%; } 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
TigerLily67 Posted June 20 Author Share Posted June 20 Thanks, @tuanphan. It doesn't quite work. It doesn't wrap to the exact shape, especially if you resize the window. It also adds it to all images, even ones not in a shape wrapper. Since the shapes are controlled by SVG, is there a way to apply the drop using it? Also, I don't understand why it works so perfectly with the list view and the map block but not the data-shape mask. Link to comment
TigerLily67 Posted June 22 Author Share Posted June 22 @tuanphan do you have any other ideas? This didn't work. See message above. Link to comment
tuanphan Posted June 25 Share Posted June 25 I see it shows fine here In case you want to target specific images, we can add a specific text to ALT, then target them, if you want this, I will give code. 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
TigerLily67 Posted July 6 Author Share Posted July 6 Hi @tuanphan, I couldn't get it to work properly, so I manually added the shadow and output all those images as PNG files. It's much less elegant, but I couldn't wait any longer. The 'Therapy Offerings' on the Home page still use the code and look great. However, I could not find any way to make it work on fluid image containers. I am using the alt image tags for SEO, so I do not think your suggestion is possible. Please correct me if I'm wrong. 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