css - 叠加多个div图片

Question

所以我试图制作一个图像循环，每个图像都有描述。当图片悬停时，叠加层将可见。这是代码示例。

.container {
  height: 100px;
  width:100px;
  display: inline-block;
}

.picture {
  height: 100%;
  width:100%
}

.contAlign {
  text-align: center;
}

.desc {
  position:flex;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  width: 100%;
  height: 0%;
  opacity: 0.5;
  transition: .5s ease;
}

.container:hover .desc {
  height: 40%;
  
}

<div class="contAlign">
  <div class="container">
    <img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
    <div class="desc"></div>
  </div>

  <div class="container">
    <img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
    <div class="desc"></div>
  </div>

  <div class="container">
    <img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
    <div class="desc"></div>
  </div>
</div>

在这种情况下，描述框向下，因为我没有使用 position: absolute;。但是，如果我这样做，该框将不会继承图片大小并采用页面大小。我该如何解决这个问题？

FIDDLE

Answer 1

将 container 的位置设置为 relative 因此 descrip 相对于它是绝对的:

.container {
  height: 100px;
  width:100px;
  display: inline-block;
  position:relative;
}

.picture {
  height: 100%;
  width:100%
}

.contAlign {
  text-align: center;
}

.desc {
  position:absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  width: 100%;
  height: 0%;
  opacity: 0.5;
  transition: .5s ease;
}

.container:hover .desc {
  height: 40%;
  
}

<div class="contAlign">
  <div class="container">
    <img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
    <div class="desc"></div>
  </div>

  <div class="container">
    <img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
    <div class="desc"></div>
  </div>

  <div class="container">
    <img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
    <div class="desc"></div>
  </div>
</div>