html - 使用CSS从包装器底部向上移动div

Question

我遇到了一个具体的问题。

我有一个正方形，里面有图片和文字。我需要做的是，当框悬停时，隐藏的文本应该从底部出现并将图像向上推(溢出:隐藏在 wrapper 上会将其切断)。文本是任意长度的， Action 应该是 css-only(没有 javascript)

html 是:

<div class="wrapper">
    <div class="image"><img src="http://placehold.it/200x200" /></div>
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</div>

还有CSS:

.wrapper {
    width:200px;
    height:200px;
    border: 1px solid red;
    overflow:hidden;
}

.content {
    height:0;
    overflow:hidden;
    transition: all 0.5s ease;
}

.wrapper:hover .content {
     height:auto;   
}

(这只是一个示例)

这是它的一个 jsFiddle: http://jsfiddle.net/a136ddj8/2/

(如果您在悬停时没有看到任何内容，请从包装类中删除 overflow:hidden)

关于如何实现这一点有什么想法吗？有可能吗？

Answer 1

在这种情况下，您可以使用额外包装器:

<div class="wrapper">
    <div class="wrap">
      <div class="image"><img src="http://placehold.it/200x200" /></div>
      <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
    </div>
</div>

然后使用 CSS，您可以将额外的容器绝对定位以完成推送效果...此外，您不能将 height 设置为自动动画，而是在 max-height< 上使用固定值.

.content {
    max-height:0;
    transition: all 0.5s ease;
    overflow:hidden;
}
.wrapper:hover .content {
     max-height:500px;   
}

检查下面的代码段

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
}
.wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 100%;
}
.image img {
  vertical-align: middle;
}
.content {
  max-height: 0;
  transition: all 0.5s ease;
  overflow: hidden;
}
.wrapper:hover .content {
  max-height: 500px;
}

<div class="wrapper">
  <div class="wrap">
    <div class="image">
      <img src="http://placehold.it/200x200" />
    </div>
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
  </div>
</div>