Показать div с динамической высотой под другим div внутри контейнера? - PullRequest
Новая
       19

Показать div с динамической высотой под другим div внутри контейнера?

0 голосов
/ 09 октября 2018

Итак, у меня есть ящик с контентом, который имеет заголовок и описание, которые расположены внизу div.Изначально описание скрыто.То, что я пытаюсь сделать, это когда вы наводите курсор мыши на элемент div, заголовок должен двигаться вверх и показывать описание, которое имеет динамическую высоту.

Вот что у меня сейчас: https://codepen.io/tayanderson/pen/qJrmXE

Проблема в том, что он не будет отображаться правильно, если описание было бы 1 строкой или 3 строками.Div заголовка должен двигаться вверх в зависимости от размера описания div.

Вот пример того, что я пытаюсь сделать

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

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Обратите внимание, что я изменил порядок внутренних элементов.

.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>
0 голосов
/ 09 октября 2018

Это то, что вы имели в виду? 

.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>
...