CODEWITHSUNDEEP
htmlcss
Tyler L
Tyler L

Reputation: 845

Text overlay image (css)

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>

Upvotes: 0

Views: 62

Answers (1)

SVSchmidt
SVSchmidt

Reputation: 6517

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>

Upvotes: 2

Related Questions