CSS Text Overlay Over Image at Bottom With Gradient Background

May 30, 2020
.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);
}

Usage

<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>

Sample

alt text

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.