I want to create a box in html/css where the read more hyperlink text is positioned over the background image. The goal is to have additional text added to the description without overlapping the image.
Here's an example of the current issue.
Currently, the description is overlapping the image position.
Does anyone know how I can adjust it so that the read-more text and image are displayed below each other instead of overlapping?
Here's the HTML code:
<div class="box">
<div class="box-cont>
<span class="content-type"></span>
<h2 itemprop="name">Test limit thingTest limit thingTest ...</h2>
<p class="meta">By random name, and random, on 7 Random 2018</p>
<p class="desc" itemprop="description">Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass ... house...</p>
<span class="img"><img src="/assets/image.jpg" alt="Screen bw"></span>
<p class="cta"><span>+ read more</span></p>
</div>
</div>
</a>
And here's the CSS code:
.box-wrap {
margin-bottom: 10px;
display: block;
text-decoration: none;
color: #1e5373;
}
.section-boxes .box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.box p, .box h2, .box .content-type {
position: relative;
z-index: 2;
}
.box .img img {
display: block;
width: 100%;
height: auto;
}
img {
max-width: 100%;
height: auto;
}
.section-boxes .box .cta {
position: absolute;
bottom: 30px;
}
This setup controls the positioning within the boxes by adjusting the z-index for the description and read more box elements.