Question

因此，我有一个内容框，该框的标题和说明位于div的底部。最初，说明是隐藏的。我想做的是，当您将鼠标悬停在div上时，标题应向上移动并显示说明，该说明具有动态高度。

这就是我现在拥有的：https://codepen.io/tayanderson/pen/qJrmXE

问题是，如果描述是1行或3行，它将无法正确显示。标题div应根据说明div的大小向上移动。

Here's an example of what I'm trying to do

HTML

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

CSS

.grid-item {
  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;
  }

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

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

Answer 1

这是你的意思吗？

.inner, .inner:hover .grid-item.inner {
  -webkit-transition:all linear 0.2s;
  transition:all linear 0.2s;
}

.inner {
  background: #afa;
  width: 300px;
  overflow: hidden;
  position: absolute;
}

.grid-item:hover .inner{
  margin-top: -100px;
}

<a class="grid-item" href="{{ .Permalink }}" style="background-image: url(images/recipes/{{.Params.image}})">
    <div class="inner"><h3 class="title is-3">{{.Title}}</h3></div>
    <div class="content"><p class="grid-item-blurb">{{.Description}}</p></div>     
</a>

Answer 2

请注意，我颠倒了内部元素的顺序。

.body {
  background: #aaf;
  height: 100px;
  width: 300px;
  overflow: hidden;
}

.inner, .content {
  transition: all linear 0.2s;
}

.content {
  height: 100%;
}

.inner {
  background: #afa;
  transform: translateY(100%);
  top: 100%;
}

.body:hover .inner,
.body:hover .content {
  transform: translateY(-100%);
}

<div class="body">
  <div class="content">
    Blue is a viewport (&lt;body&gt;, visible part of a page), which content should be compressed upon green slide-in
  </div>
  <div class="inner">Green is variable-height text which slides in on viewport hover</div>
</div>

在容器内的另一个div下方显示具有动态高度的div？

2 个答案: