How to put text bocks over image on a fixed background? - html

Question

I'd like to put news titles on image background like this:
What I came up with, is this:
<div class="image-container">
<img src="/path/to/img" class="img-thumbnail">
<div class="text-block">
<div class="bottom-right">My News Title</div>
</div>
</div>
CSS:
.text-block {
position: absolute;
bottom: 0px;
right: 0px;
background-color: #fff;
opacity: .8;
color: black;
width: 100%;
}
.bottom-right {
color: black;
position: absolute;
bottom: 8px;
right: 16px;
background-color: #fff;
}
Which results in this:
My problem is how to modify my code so that the title appears on a semi-transparent background which covers 1/3 of the bottom of the block, like the coffee picture above?

Answer 1

You could clean up the markup a bit and use a simple container element with a title (e.g. a div and a heading).
As noted by #zero298 if the image doesn't convey any information it should be defined as a background of the container
Codepen demo
Markup
<div style="background-image: url(https://.../coffee-serum-300x240.jpg)">
<h2>
The title of this article
may span across several lines.
but it's always anchored on the bottom
</h2>
</div>
CSS
div {
width: 300px;
height: 240px;
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
div h2 {
background: rgba(255, 255, 255, .6);
margin: 0;
padding: 1em 1em 3em 1em;
}
Final result

Answer 2

Since the image is decorative, use background-image:
.card {
width: 100px;
height: 200px;
color: white;
background-color: blue;
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.text{
background-color: rgba(1,1,1,0.5);
}
<div class="card">
<div class="text">
<h2>Hello World</h2>
<p>Foo bar</p>
</div>
</div>

Answer 3

You could do the following :
.bottom-right {
color: black;
position: absolute;
bottom: 50%;
right: 50%;
background-color: #fff; }
.image-container {
position: relative;
text-align: center;
color: white; }
.text-block {
position: absolute;
top: 95%;
left: 50%;
height: 40%;
transform: translate(-50%, -50%); }
Also, I think this is very helpful form w3schools.
https://www.w3schools.com/howto/howto_css_image_text.asp