I'm facing an issue with overlaying text on an image - the text is getting pushed underneath the image and not displaying as intended. I can't figure out what's causing this problem. Any assistance would be greatly appreciated.
Below is the code I'm using:
<div class="product-hero-container">
<div class="product-hero">
<img src="./images/image.jpg" alt="Title">
<div class="product-hero-text">
<h1>Title</h1>
<h2>Sub title</h2>
<p>Description</p>
</div>
</div>
</div>
And here is the related CSS:
.product-hero-container {
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background: #fff;
}
.product-hero-container img {
display: block;
}
.product-hero {
position: relative;
width: 100%;
height: 100%;
}
.product-hero-text {
position: absolute;
overflow: hidden;
padding: 12px;
font-family:'Roboto', arial, sans-serif;
color:#FFF;
}