时间戳

首页 > 解决方案 > 根据高度显示覆盖 div？

html - 根据高度显示覆盖 div？

问题描述

我有一个带有文本覆盖的图像，其标题描述了图像。悬停时，我希望标题文本向上推，显示标题下方的描述文本。但是，如果包含文本的 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%);
  }
}

标签： htmlcss

解决方案

我想出了这个，首先我稍微改变了你的标记

<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翻译成100%少了标题的高度，transform: translateY(calc(100% - 40px));然后加了一个transition

.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%);
  }
}

让我知道你在找什么！在这里，您有一个代码笔。

推荐阅读