Question

I have an image over which I want to display some text information. I have a div below it that contains the information, with a transparent background and everything formatted. I can use margin-top: -50% to pull it up over the image, but since I’m using a grid (1140), when the screen is shrunk things don’t match up.

Here is what I have so far:

HTML (in Slim)

.fourcol
  .book
    img src="#{book.image_url}"
    .book-info
      header
        h4.title
          = book.title
        h6.author
          = book.author
      p.description
        = book.description

Relevant CSS:

.book-info {
      margin-top: -62%;
      padding: 1em;
      padding-bottom: 1.5em;
      float: left;
      background-color: black;
      opacity: .8; }

How can the book-info scale so it’s bottom is always at the bottom of the image?

Answer 1

You can use position: absolute on .book-info to position it in relation to .book:

.book {
    position: relative;
    overflow: hidden; /* to clear the floats inside */
}

.book-info {
    position: absolute;
    bottom: 0;
}

See demo.