Hello I am trying to get the effect that I have done in photoshop, but get the same result as photoshop but using only css.
div {
width: 100vw;
height: 100vh;
background-color: black;
}
img {
width: 400px;
height: 200px;
padding: 10px;
}
p {
color: white;
}<div>
<p>
Unphotoshopped image
</p>
<img src="https://sportshub.cbsistatic.com/i/2022/07/09/c71b7102-f1ec-41b5-8362-5597256779ce/team-fortress-2.jpg" />
<p>
Wanted effect
</p>
<img src="https://i.imgur.com/TAZ8DIM.png" />
</div>>Solution :
You can accomplish this with the mask-image CSS properity and a linear-gradient, i.e.:
.thumbnail {
mask-image: linear-gradient(rgba(0, 0, 0, 1) 80%, transparent);
}