Archived topic
Shadow behind featured image and buttons
8 replies · Started by Manpreet on February 18, 2023
Hi there,
I want to add rounded corners and shadow to the featured image and buttons. Provide me with the CSS code for it.
Hi there,
please provide us with a link to a post / page on your site where you want this to be applied. And we will be pleased to provide you with some CSS code for it.
thank you.
Also, how can I increase the gap between the image and the paragraph on a blog post?
https://animefirm.com/top-5-isekai-anime-in-january-2023/
Hi Manpreet,
Try adding this through Appearance > Customize > Additional CSS:
.content-area .inside-article .post-image img {
border-radius: 24px;
box-shadow: 10px 5px 5px #444;
}
.content-area .inside-article .read-more-container a {
border-radius: 16px;
box-shadow: 10px 5px 5px #444;
}
.single-post .wp-block-image {
margin-bottom: 16px;
}
Change the values to your preference.
Can you also provide me CSS code for the shadow from all sides behind the featured image and button?
I updated the code above. You can refer to this for assistance with regards to box-shadows: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Using the above code, the shadow is shown from two sides (right and bottom). I want to show from all sides of image and button.
Try this one:
.content-area .inside-article .post-image img {
border-radius: 24px;
box-shadow: 0px 0px 16px #444;
}
.content-area .inside-article .read-more-container a {
border-radius: 16px;
box-shadow: 0px 0px 16px #444;
}
.single-post .wp-block-image {
margin-bottom: 16px;
}
Alter the values to your liking.