javascript - CSS动画在父元素上向上滑动子元素

Question

我正在尝试实现向上滑动动画，其中行可以有 4/2/1 列。每列都有图像、标题和描述。所有这些都可以是可变大小，因此我使用 flex 来保持每列的大小相等。标题完全显示，但仅显示第一行描述，其余部分隐藏。 (我想不出正确对齐描述的方法)

当您将鼠标悬停在列上时，我希望标题和说明向上滑过显示完整说明的图像。如果描述更长，请隐藏其余部分。主要要求是列的高度在悬停时不应改变。

这是我创建的 fiddle :https://jsfiddle.net/hbnkfmcr/3/

.row {
  display: flex;
  width: 400px;
}
.col {
  border: 1px solid black;
  margin-right: 5px;
  justify-content: center;
}
.label {
  background-color: red;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.label p {
  line-height: 14px;
  max-height: 14px;
  overflow: hidden;
}
.col:hover p {
  max-height: 100%;
}

<div class="row">
  <div class="col">
    <div class="container">
      <div class="image">
        <img src="http://www.hondahookup.com/images/100x100.jpg">
      </div>
      <div class="label">
        <h4>Title
                    </h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="container">
            <div class="image">
                <img src="http://www.hondahookup.com/images/100x100.jpg">
            </div>
            <div class="label">
                <h4>Long Title Here
                    </h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="container">
            <div class="image">
                <img src="http://www.hondahookup.com/images/100x100.jpg">
            </div>
            <div class="label">
                <h4>Title
                    </h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="container">
            <div class="image">
                <img src="http://www.hondahookup.com/images/100x100.jpg">
            </div>
            <div class="label">
                <h4>Title
                    </h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            </div>
        </div>
    </div>
</div>


    

我愿意使用 JavaScript，只要它是 Angular 2。提前致谢。

Answer 1

将您的标签文本放到另一个具有指定高度的 div 中:

.label-text{
  height:50px
}

<div class="label">
    <div class=label-text><h4>Title</h1></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>

https://jsfiddle.net/hbnkfmcr/7/