Site logo

Archived topic

Add shadows to all the post and page images without any additional plugin

5 replies · Started by Shami on August 21, 2020

Viewing posts 1–6 of 6

How can I add shadows to all the post and pages images without any additional plugin?

I want to add some css in such a way that it doesn't conflict with other plugins. I only want to add shadows in my post and pages images to make them look good.

Hi there,

instead of using this CSS selector:

.post img {

use:

.post .wp-block-image img,
.post .featured-image img {

This will apply only to images added using an Image block and the featured image.

Can you please elaborate? I didn't get anything at all.

I forgot to tell you that I've been using this css for adding shadow to my post's images:

.post img {
border:1px solid #C0C0C0;
box-shadow: 10px 10px 5px #ccc;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
-khtml-box-shadow: 10px 10px 5px #ccc;
}

But I noticed that it doesn't work on pages. Also I hope to increase the blur and spread a bit. So how do I do it?

If you want it across the entire site you would do this:

.wp-block-image img,
.featured-image img,
.post-image img {
    border:1px solid #C0C0C0;
    box-shadow: 10px 10px 5px #ccc;
}

You can use a site like this to generate the box-shadow property:

https://www.cssmatic.com/box-shadow

Thanks David. That website you mentioned made things a lot easier.

You're welcome

This archived topic is closed to new replies.