html - 带有滚动文本的滑动叠加

Question

我在这里是全新的，正在尝试在图像上滑动带有文本的叠加层。叠加层已关闭，我在修复它时遇到了一些问题。这是一个响应式画廊，其中所有图像都做同样的事情。

  <div class="wrapper">
    <h1>Flexbox Image Gallery</h1>
      <div class="img-area">
        <div class="container">
        <div class="single-img"><img src="img/1.jpg" alt=""></div>
        <div class="overlay">
    <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem et tortor consequat id porta nibh. Ut tellus elementum sagittis vitae et leo duis. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Nam at lectus urna duis convallis. Massa tincidunt nunc pulvinar sapien et ligula. Et malesuada fames ac turpis. Eu lobortis elementum nibh tellus molestie nunc non blandit. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Volutpat blandit aliquam etiam erat velit. Aliquam nulla facilisi cras fermentum odio eu feugiat. Ornare lectus sit amet est placerat in egestas erat. Adipiscing enim eu turpis egestas pretium. Quam vulputate dignissim suspendisse in est ante in.</p>
    </div>
  </div>
</div>

这是它的 CSS。

.container {
  position: relative;
  width: auto;
}
.wrapper h1 {
 text-align: center;
 font-size: 30px;
}

.img-area{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.single-img{
  padding: 0 20px 20px;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
  overflow: scroll;
}

.text {
  color: white;
  font-size: 16px;
  position: absolute;
  top: 100%;
  left: 40%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: left;
  width: 70%;

}

目标是让文本位于叠加层的顶部，您可以向下滚动。图片尺寸为 500x500。文字边缘应该还有一点空间。

Answer 1

大小不匹配是因为 single-img div 上的填充被算作其宽度的一部分。您可以从该 div 中删除填充并将其放在父级上以避免这种情况。我做了一个例子here有一些变化。