Html 使用css在包装器中从底部向上移动div

我有一个特别的问题，我被困在那里

我有一个正方形，里面有图片和文字。 我需要做的是，当框悬停时，隐藏的文本应该从底部出现，并将图像向上推（溢出：包装器上隐藏会将其切断）。 文本的长度是任意的，操作应该是css（没有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>

（这只是一个样本）

以下是其中的一部分：

（如果悬停时没有看到任何内容，请移除溢出：从包装器类隐藏）

---

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

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

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

检查下面的代码段

.wrapper{
宽度：200px；
高度：200px；
边框：1px纯红；
位置：相对位置；
溢出：隐藏；
}
.包裹{
位置：绝对位置；
底部：0；
宽度：100%；
最小高度：100%；
}
.图像img{
垂直对齐：中间对齐；
}
.内容{
最大高度：0；
过渡：所有0.5s缓解；
溢出：隐藏；
}
.wrapper:hover.content{
最大高度：500px；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，

这应该会指引你正确的方向。显然，你会想玩的风格。主要是使用定位，而不是高度

---

首先，您可以通过使用图形和图形标题使其更具语义。但是，你会受到一些限制。如果您想在不使用javascript的情况下完成此操作，您将被限制在容器上的固定高度。下面是一个片段：

。向上滑动标题{/*主图形元素，需要固定高度*/
高度：200px；
宽度：200px；
溢出：隐藏；
位置：相对位置；
边框：1px纯黑；
}
.slide-up caption img{display:block}/*清除间距问题*/
.向上滑动img周围的标题内部{/*包装，并将标题粘贴到底部*/
位置：绝对位置；
底部：0；
左：0；
}
.向上滑动标题figcaption{
身高：0；
填充：0.5em；/*顶部和底部无填充，使其完全隐藏*/
背景：黑色；
颜色：白色；
-webkit过渡：所有.25s；/*过渡只是为了好玩*/
-moz转换：全部为.25s；
过渡：全部为0.25秒；
}
.向上滑动标题：悬停图标{
高度：自动；/*只认为你真的需要这里*/
填充：.5em；/*为样式添加填充*/
-webkit过渡：所有.25s；/*过渡都是为了好玩*/
-moz转换：全部为.25s；
过渡：全部为0.25秒；
}

这是演示内容。

播放位置属性

这是演示

.wrapper{
宽度：200px；
高度：200px；
边框：1px纯红；
溢出：隐藏；
}
.内容{
溢出：隐藏；
过渡：所有0.5s缓解；
-moz过渡：所有0.5s轻松；
-webkit过渡：所有0.5s轻松；
位置：相对位置；
填充：20px；
排名：0
}
.wrapper:hover.content{
高度：自动；
顶部：-200px；
}
图像img{位置：相对；过渡：所有0.5s；
-moz过渡：所有0.5s轻松；
-webkit转换：所有0.5s轻松；顶部：0；}
.wrapper:悬停img{top:-200px；}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，

我刚刚注意到您想将图像向上推@丹科说得对。

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

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

* {
    box-sizing: border-box;
}
.wrapper {
    width:200px;
    height:200px;
    border: 1px solid red;
    overflow:hidden;
    position:relative;
}
.content {
    transition: all 0.5s ease;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 210px;
    margin:0;
    padding: 5px;
}
.wrapper:hover .content {
    height:auto;
    position: absolute;
    top: 10px;
}