Question

我的网格里面有多个盒子。每个方框都有一个叠加层，标题和一些段落。叠加层位于框下方，只有标题可见（底部：〜-90％）。

在鼠标悬停时，叠加层向上移动，直到它完全可见（底部：0）。文本与框底部对齐。

正如您在下面的示例中所看到的（整页），我对段落的动态高度存在一些问题。

你有什么想法，如何解决这个问题？

.grid-item {
  position: relative;
  float: left;

  height: 300px;
  width: 300px;
  
  margin-right: 30px;

  background: #009345;
}
.grid-item:hover .item-overlay{
  bottom: 0;
}

.item-overlay {
  position: absolute;
  z-index: 2;
  
  bottom: -30%;
  
  padding: 1rem;
  
  color: #ededed;
  transition: bottom .5s ease-in-out;
}
.item-title {
  background-color: rgba(0,0,0,.5);
}

<div class="grid">
  <div class="grid-item">
    <div class="item-overlay">
      <h2 class="item-title">Visible Headline 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Claudii libidini, qui tum erat summo ne
        imperio, dederetur.</p>
    </div>
  </div>
  <div class="grid-item">
    <div class="item-overlay">
      <h2 class="item-title">Visible Headline 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Claudii libidini, qui tum erat summo ne
        imperio, dederetur. Conclusum est enim contra Cyrenaicos satis acute, nihil ad Epicurum. Quibus ego
        vehementer assentior. Bonum patria: miserum exilium.</p>
    </div>
  </div>
</div>

Answer 1

您可以将叠加层完全置于视线之外（top:100%），然后再次将叠加层重新拉回指定值（例如4em）并加transform:translate。< / p>

on :hover您将翻译值增加到 -100％（等于叠加自己的高度），这意味着叠加层现在位于父div的底部。< / p>

将广告转换为transform而不是bottom。

＆＃13;

.grid-item {
  position: relative;
  float: left;
  margin-bottom: 1em;
  height: 300px;
  width: 300px;
  margin-right: 30px;
  background: #009345;
  overflow: hidden;
}
.grid-item:hover .item-overlay {
  transform: translateY(-100%);
}
.item-overlay {
  position: absolute;
  z-index: 2;
  top: 100%;
  padding: 1rem;
  transform: translateY(-4em);
  color: #ededed;
  transition: transform .5s ease-in-out;
}
.item-title {
  background-color: rgba(0, 0, 0, .5);
}

＆＃13;

<div class="grid">
  <div class="grid-item">
    <div class="item-overlay">
      <h2 class="item-title">Visible Headline 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Claudii libidini, qui tum erat summo ne imperio, dederetur.</p>
    </div>
  </div>

  <div class="grid-item">
    <div class="item-overlay">
      <h2 class="item-title">Visible Headline 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Claudii libidini, qui tum erat summo ne imperio, dederetur. Conclusum est enim contra Cyrenaicos satis acute, nihil ad Epicurum. Quibus ego vehementer assentior. Bonum patria: miserum exilium.</p>
    </div>
  </div>
</div>

＆＃13;

CSS Overlay - 从底部淡入

1 个答案: