Make the bottom of an image a little dark - html

Question

I have an image and some text inside. But it make hard to read because the image is too light. I want to make it a little dark at the bottom so the text can appear more clearly. How can I do that? Thank you!
This image is described what I've mentioned:
Here is my code:
.image {
height: 450px;
position: relative;
width: 256px;
margin-right: 1.4rem;
margin-bottom: 3rem;
cursor: pointer;
color: white;
}
.image__text {
font-size: 2rem;
position: absolute;
bottom: 1%;
left: 20%;
line-height: 50px;
}
<div class="image">
<div class="image__child">
<img alt="img" src="https://lh3.googleusercontent.com/-MVd7NWMh1oI/Vqrtx00GXQI/AAAAAAAAWT8/PRBTjxMENbY/s800-Ic42/ch%2525C3%2525B3-teacup-pomeranian.jpg" />
</div>
<div class="image__text">SOME TEXT</div>
</div>

Answer 1

If your only goal is to make the text more visible you could just add a text shadow.
.image__text {
text-shadow : 1px 1px black;
}
Otherwhise you can add an overlayer with a gradient that goes from black to trasparent
.image {
height: fit-content;
position: relative;
width: fit-content;
margin-right: 1.4rem;
margin-bottom: 3rem;
cursor: pointer;
color: white;
z-index:1;
}
.image::after{
content:"";
position:absolute;
background: linear-gradient(0deg, rgba(39,38,42,1) 0%, rgba(255,255,255,0) 60%);
z-index:2;
height:100%;
width:100%;
top:0;
left:0;
}
.image__text {
font-size: 2rem;
position: absolute;
bottom: 10%;
left: 20%;
line-height: 50px;
z-index:3
}
<div class="image">
<div class="image__child">
<img alt="img" src="https://lh3.googleusercontent.com/-MVd7NWMh1oI/Vqrtx00GXQI/AAAAAAAAWT8/PRBTjxMENbY/s800-Ic42/ch%2525C3%2525B3-teacup-pomeranian.jpg" />
</div>
<div class="image__text">SOME TEXT</div>
</div>

Answer 2

I would suggest using a background-image gradient overlay and add the source via the css as illustrated below under background-image. It may take a moment to fiddle with the percentages to make sure the right portions are overlaid with the gradient, and with the degrees as well. Can check out the docs on css gradients for more info - https://www.w3schools.com/cssref/func_linear-gradient.asp
.image {
background-image:
linear-gradient(190deg, rgba(white, 10%), rgba(black, 100%)),
url('images/insert background image.jpg');
height: 450px;
position: relative;
width: 256px;
margin-right: 1.4rem;
margin-bottom: 3rem;
cursor: pointer;
color: white;
}
With this you can then place the text inside the div - as the image becomes the background of the div.
There is also the option of placing the text in the div with the image and just giving that a background color and sizing it accordingly.