Archived topic
Placement of Featured Image Caption
3 replies · Started by Michael on August 21, 2021
I'm trying to achieve the same effect that is one the homepage slider (first thing on the page)
https://mysbgardens2.wpengine.com/
though the above uses a different method using an elementor widget.
Here's the section I'm trying to show the captions over the featured image (project detail pages)
https://mysbgardens2.wpengine.com/portfolio/succulents-by-the-sea/
I'm trying to use a negative top margin on the figcaption to place the caption text just above the featured image (as opposed to beneath the featured image)
To illustrate, I've set the top-margin at -25px so you can see my issue:
.wp-block-image figcaption, figcaption {
color: #FFF;
background-color: rgba(150, 149, 81, 0.8);
text-align: left;
padding: 10px 10px 10px 20px;
margin-top: -25px;
z-index:100!important;
}The text displays fine over the image, but the green background is behind the image.
How can I correct that?
Hi there,
try this CSS instead:
.wp-block-image {
position: relative;
}
.wp-block-image img {
vertical-align: bottom;
}
.wp-block-image figcaption {
color: #FFF;
background-color: rgba(150, 149, 81, 0.8);
text-align: left;
padding: 10px 10px 10px 20px;
z-index: 100!important;
font-family: 'Merriweather';
font-size: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 0;
}Perfect. Thank you!
You're welcome
