[Resolved] Drop Shadow On Image Adds Strange White Bar

[Jason]

Hi,

I’ve tried about every CSS combination in the support forums to try and get a nice box shadow showing on images. Unfortunately, every time I do it I get a weird white bar at the bottom of the image.

I am setting up a CSS selector for each image I want a drop shadow on (and these images are centered in a column if that makes any difference).

https://imgur.com/a/LvxrSKa

[David]

Hi there,

can you share a link to the site where i can see the issue ?

[Jason]

Sorry for the late response!

Here’s a link in private comments. I have it on the picture on the far bottom of the page under “Stress”

And here’s the code I have:

.drop-shadow-two {
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
	} 

[Jason]

(WP-rocket cache disabled)

[Elvin]

Hi,

Can you try modifying the CSS into this?

.drop-shadow-two img {
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}

So it directly applies to the image instead of its ancestor element.

Let us know.

[Jason]

You’re a genius! That fixed it. Thank you 🙂

[Elvin]

No problem. Glad it works for you. 🙂

[Author]

Posts