Archived topic
Add shadows to all the post and page images without any additional plugin
5 replies · Started by Shami on August 21, 2020
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:
Thanks David. That website you mentioned made things a lot easier.
You're welcome