I would like to have a shadow around an image like in the image result.png. But no matter whether I enter it in the column definition or in the image definition, it always affects the column.
This is not correct, is it?
Thank you for your help.
Solved
SP Page Builder
Shadows around a picture
Accepted answer
Marked as the solution
Paul Frankowski Senior Staff
OK, done, you have shadow around image. Indeed, Custom CSS was needed:
I used extra class name
7 more replies
Paul Frankowski Senior Staff
2 years ago
· edited
Hi Patric,
If you need shadow for image only, you have to set it inside addon setting, not inside column or row setting.
As you noticed so far : In Image addon > Style (tab) > Miscellaneous (section) > Box Shadow: On > then set it.
But If image has empty elements around, you have to cropp image first otherwise it will look bad.
Yes you can also use Custom CSS if you feel better in that area.
Paul Frankowski Senior Staff
Look, and check.
image must be only photo, not empty areas added by somebody in Photo editor tool.
Add new Image (Bild) addon, and use included demo image for your tests.
Patrick Ladner Asked this
No, the background is the column. I have cropped the image as it needs to be and added radii. But the shadow has no effect on the image. Can you try it yourself? The page is called 'Stoma' and the image with the woman should have a shadow, like the white box below.
The access data is hidden.
Many thanks
Patrick Ladner Asked this
Oh, thank you very much.
I thought that would work without CSS.
Now I can write this class in the custom.css and use it again and again.
Thank you very much for your help.
Paul Frankowski Senior Staff
yes, you can use inside custom.css :))
Patrick Ladner Asked this
.img-shadow img {box-shadow: 0 .5rem 1rem rgba(80,80,80,.15)
I'm currently testing it on various devices. Is it possible that this CSS does not work on IOS devices?
iPhone, iPad etc.?
Patrick Ladner Asked this
Sorry Paul. Your CSS is working perfectly. I had a caching issue on my iOS devices.
Log in to reply.