Shadows Around A Picture - Question | JoomShaper

Shadows Around A Picture

PL

Patrick Ladner

SP Page Builder 1 year ago

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.

https://prnt.sc/2t2aHFM_Sr04

https://prnt.sc/ZREBgrtc5KE5

https://prnt.sc/NXxD-zcVMb1Q

0
8 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #172933

OK, done, you have shadow around image. Indeed, Custom CSS was needed:

info_2739_2024.gif

I used extra class name

info_2740_2024.gif

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #172882

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #172883

Look, and check.

info_2738_2024.gif

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.

0
PL
Patrick Ladner
Accepted Answer
1 year ago #172928

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

0
PL
Patrick Ladner
Accepted Answer
1 year ago #172935

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #172936

yes, you can use inside custom.css :))

0
PL
Patrick Ladner
Accepted Answer
1 year ago #172951

.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.?

0
PL
Patrick Ladner
Accepted Answer
1 year ago #173032

Sorry Paul. Your CSS is working perfectly. I had a caching issue on my iOS devices.

0