CSS Text Overlay Over Image at Bottom With Gradient Background

.image-overlay {  position: relative;}.image-overlay > div {  padding: 1rem 0.5rem 0.25rem 0.5rem;  position: absolute;  bottom: 0;  width: 100%;  line-height: 1.25rem;  background: rgba(255,255,255,.4);  background: linear-gradient(0deg, rgba(255,255,255,.6) 0%, rgba(0,0,0,0) 100%);      text-shadow: 1px 1px 0px rgba(200,200,200,.85);}

<div class="image-overlay">
  <a href="#" target="_self">
    <img src="https://picsum.photos/600" alt="Test" />
  </a> 
  <div>Black Text with White Shadow at bottom, with blending gradient background</div>
</div>