How can I make this text boxes fill out the bottom of the images?

Max J. 0
Viewed 24

I am working on a layout where I have two movie posters besides each other. There are two things that I can't get to work at the moment:

  1. The overlaying text box should have the width of the poster and be located at the bottom of it (the bottom line of the text box should be at the same position as the bottom line of the poster).
  2. The images should automatically resize so that the posters are always fully on the screen. At the moment, the bottom of the posters is not visible if the window becomes too small. They should also always keep their original aspect ratio (currently also not given).
  3. The posters and their respective texts should always be centered on the screen.

This is how far I've got, however trying to solve any of the mentioned problems has created new ones so far.

JSFiddle

.layout {
  width: 100%;

  display: flex;
  gap: 16px;
}

.film {
  flex-grow: 1;
  
}

.poster {
  width: 100%;
  height: 100%;
  max-width: 500px;
  max-height: 700px;
}

.overlay {
  color: white;
  text-align: center;
  font-size: 20px;
  font-family: sans-serif;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0, 0, 0, 0.5);
  padding: 20px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.remove {
  text-align: center;
  padding: 10px;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0, 0, 0, 0.5);
  color: white;
}
<section class="layout">
  <div class="grow1">
    <img class="poster" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Marie_Kr%C3%B8yer_movie_poster.jpg">
    <div class="overlay">Title<br><span class="year">2014</span></div>
    <div class="remove">
    Remove Film
    </div>
  </div>
  <div class="grow1">
    <img class="poster" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Marie_Kr%C3%B8yer_movie_poster.jpg">
    <div class="overlay">Title<br><span class="year">2015</span></div>
        <div class="remove">
    Remove Film
    </div>
  </div>
</section>

Desired result (roughly): Desired result

flexbox css html
1 Answers

Here you are:

* {
  box-sizing: border-box
}

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0
}

.layout {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}

.grow1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  max-width: 500px;
  max-height: 700px;
  position: relative;
}

.poster {
  height: 100%;
  align-self: center;
}

.overlay {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  color: white;
  text-align: center;
  font-size: 20px;
  font-family: sans-serif;
  background-color: rgba(0, 0, 0, .5);
  padding: 20px 20px 10px;
}

.remove {
  font-size: initial;
  font-family: serif;
  padding: 20px 0 0;
}
<section class="layout">
  <div class="grow1">
    <img class="poster" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Marie_Kr%C3%B8yer_movie_poster.jpg">
    <div class="overlay">Title<br><span class="year">2014</span>
      <div class="remove">
        Remove Film
      </div>
    </div>
  </div>
  <div class="grow1">
    <img class="poster" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Marie_Kr%C3%B8yer_movie_poster.jpg">
    <div class="overlay">Title<br><span class="year">2015</span>
      <div class="remove">
        Remove Film
      </div>
    </div>
  </div>
</section>

Kosh0
Related