html - CSS : Position Text over image in Flexbox

Question

I have a flexbox with 3 Images that I already could shape to have the same width and height. Now I'd like to add a text that is centered in each image. My final goal is to add a hover effect, so the text appears on hover.

From some other tutorials I figured that I would need to add the paragraph into another div. However I do not manage to "overlap" the text container above the corresponging image. Anyone have any tips or tricks on how to best accomplish this?

.flexbox {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 80vh;
}

.container {
  width: 34%;
  max-height: 70vh;
  display: block;
  text-align: center;
}

.image-category {
  width: 100%;
  opacity: 0.6;
  max-height: inherit;
  overflow: hidden;
}

<div class="flexbox" id="flex">

  <div class="container" id="box1">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 1</p>
    </div>
  </div>

  <div class="container" id="box2">
    <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 2</p>
    </div>
  </div>

  <div class="container" id="box3">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 3</p>
    </div>

  </div>

Answer 1

Is this what you asked for?

.flexbox{
position: relative;
display: flex;
flex-direction: row;
width: 100%;
max-height: 80vh;
}

.container{
  cursor: pointer;
  width: 34%;
  max-height: 70vh;
  display:block;
  text-align: center;

}

.image-category{
  width: 100%;
  opacity: 1;
  max-height: inherit;
  transition:  0.5s;
  overflow: hidden;
}

.image-description{
  transform: translateY(-50vh);
  font-size: 25px;
  font-family: 'Comic Sans MS';
  font-weight: 900;
  opacity: 0;
  transition:  0.6s;
}

.container:hover .image-description{
  opacity: 100;
}

.container:hover .image-category{
  opacity: 0.6;
}

<div class="flexbox" id="flex">

        <div class="container" id="box1">
          <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
          <div class="image-description">
            <p class="description">Example 1</p>
          </div>
        </div>

        <div class="container" id="box2">
          <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
          <div class="image-description">
            <p class="description">Example 2</p>
          </div>
        </div>

        <div class="container" id="box3">
          <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
          <div class="image-description">
            <p class="description">Example 3</p>
          </div>

</div>