Question

我有一幅图像，上面有文字覆盖，并带有描述该图像的标题。悬停时，我希望标题文本向上推，以显示标题下方的描述文本。但是，如果包含文本的div的高度发生变化，我的代码将无法正常工作。例如，当描述文字较短时，标题文字会向上移动太多，从而导致两个div之间存在间隙。

因此，标题文本应根据说明div的高度向上移动。我该怎么办？

https://codepen.io/tayanderson/pen/qJrmXE

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
    <div class="title">
    Caramel Walnut Apple Pie
    </div>
    <div class="desc">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
    <div class="title">
    Butter Cake
    </div>
    <div class="desc">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>

  <div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
    <div class="title">
    Chocolate Pecan Ice Cream
    </div>
    <div class="desc">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>

.grid-item {
  display: inline-block;
  height:300px;
  background-size: cover;
  width:300px;
  position: relative;
  overflow: hidden;
  color: #fff;

  .title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    font-size: 35px;
  }

  .desc {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    padding: 5px 20px;
  }

  &:hover .title {
    bottom: 30%;
  }
  &:hover .desc {
    transform: translateY(0%);
  }
}

Answer 1

我想到了这一点，首先我对您的标记做了一些更改

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
  <div class="title">
    <h1>Test</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam eius perspiciatis similique, unde impedit esse, temporibus quo.</p>
  </div>
</div>

现在您在同一div中具有标题和文本，然后需要稍微更改一下CSS，我将div的标题高度transform: translateY(calc(100% - 40px));转换了100％，然后添加了一个过渡

.grid-item {
  display: inline-block;
  height:300px;
  background-size: cover;
  width:300px;
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 10px;

  .title h1 {
    font-size: 35px;
    margin: 0;
    height: 40px;
  }

  .title p {
    margin: 0;
    left: 0;
    right: 0;
    width: 90%;
  }

  .title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    transform: translateY(calc(100% - 40px));
    transition: all .4s ease-out;
    padding: 0 20px;
  }

  &:hover .title {
    transform: translateY(0%);
  }
}

让我知道您在寻找什么！ Here您有一个Codepen。

Answer 2

例如，正如我在评论中告诉您的那样，我会将.title div中的.desc作为h4放置-例如。这样可以解决您的问题。接下来是一个演示：

.grid-item {
  height: 250px;
  background-size: cover;
  width: 250px;
  position: relative;
  overflow: hidden;
  color: #fff;
  
  display:inline-block; 
  margin:1em;
}

.grid-item .desc {
  position: absolute;
  bottom: 0;
  transform: translateY(100%);
  padding: 5px 20px;
  transition: transform 1.5s;
}
.grid-item:hover .desc {
  transform: translateY(0%);
}

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">

  <div class="desc">
    <h4>Title</h4>
  Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit amet  Lorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit amet 
  </div>
</div>

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">

  <div class="desc">
    <h4>Title</h4>
  Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet  
  </div>
</div>

Answer 3

嗯，或者您可以将标题放在顶部吗？

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
  <div class="title">
  Short text
  </div>
  <div class="desc">
 ectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

样式：

.title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0 20px;
  }

  .desc {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    padding: 5px 20px;
    word-break: break-all;
  }

  &:hover .title {
    position: relative;
  }
  &:hover .desc {
    transform: translateY(0%);
    position: relative;
     word-break: break-all;
  }

在这种情况下，所有内容看起来都更加正确，而没有跳过标题就像这里：https://codepen.io/anon/pen/XyMQjO

根据高度显示叠加层div？

3 个答案: