时间戳

首页 > 解决方案 > 带有滚动文本的滑动覆盖

html - 带有滚动文本的滑动覆盖

问题描述

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


  <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。文本应该仍然与边缘有一点空间。

标签： htmlcss

解决方案

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

推荐阅读