Text overlay image (css)

Question

This is really frustrating! How do I make the < h2> go on the bottom of the image, not the bottom of the text?

https://codepen.io/TylerL-uxai/pen/gRxMqG/

<div class="col-lg-4">
  <div class="header-link">
    <img src="https://image.ibb.co/haP17k/umbrella.jpg" width="300" height="auto" alt="umbrella" border="0">
    <h2>Artificial Intelligence & Blockchain Interest</h2>
  </div>
    <p>Learning more every day about Ethereum and other blockchain technologies!</p>
    <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
  </div>

Answer 1

Like this maybe?

• Replace the <img> with a <div> and use the image as a background for that div
• Include the h2 within that div
• Apply position: relative to the div
• Apply position: absolute to the h2, since an absolute positioned element is positioned

at a specified position relative to its closest positioned ancestor

( MDN )

 .header-img { position: relative; background: url('https://image.ibb.co/haP17k/umbrella.jpg') center center no-repeat / 100% 100%; height: 300px; width: 300px; } h2 { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; } 

 <div class="col-lg-4"> <div class="header-link"> <div class="header-img"> <h2>Artificial Intelligence & Blockchain Interest</h2> </div> </div> <p>Learning more every day about Ethereum and other blockchain technologies!</p> <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p> </div> </div>