Jacob Jacob - 5 months ago 6
CSS Question

How do you place text along the bottom of an image?

How do you place text above an image, such that it runs across the bottom of the image.

i.e.

<div class="i_have_an_image">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>


I am struggling to work it out, to see what I mean, The following web site, has a great example of this. I've seen it before on sites, heres an example snapshot of what I mean:


Answer

Wrap the image in an inline-block div which has position:relative.

Position the h2 absolutely with bottom:0 and width:100% and the height of the h2 will adjust automatically to the content of the positioned element.

.i_have_an_image {
  display: inline-block;
  position: relative;
}
.i_have_an_image img {
  display: block;
}
.i_have_an_image h2 {
  position: absolute;
  margin: 0;
  bottom: 0;
  left: 0;
  width:100%;
  padding: 1em;
  background: rgba(255, 255, 255, 0.5);
  color: white;
}
<div class="i_have_an_image">
  <img src="http://www.fillmurray.com/460/300" alt="">
  <h2>I appear on top of the image, but aligned along the bottom</h2>
</div>

Comments