Html 显示一半的div在悬停时向上滑动

目前，我复制了这段代码，它在悬停时显示了一个隐藏的div

但我想要的是这样的东西

我想要的是，当您将鼠标悬停在第1个框（如第2张图片所示）的标题上时，包含标题的div将向上滑动并占据整个空间，显示标题下的其他内容

---

有人能给我推荐一个类似的教程吗？提前感谢：

您所需要做的就是像这样更改覆盖框的高度百分比

.集装箱{ 位置：相对位置； 宽度：50%； } .形象{ 显示：块； 宽度：100%； 高度：自动； } .覆盖{ 位置：绝对位置； 底部：0； 左：0； 右：0； 背景色：008CBA； 溢出：隐藏； 宽度：100%； 身高：20%； 过渡：放松； } .container:悬停。覆盖{ 身高：100%； } .文本{ 颜色：白色； 字体大小：20px； 位置：绝对位置； 最高：50%； 左：50%； -webkit转换：翻译-50%，-50%； -ms转换：翻译-50%，-50%； 转化：转化-50%，-50%； 文本对齐：居中； } 从底部滑入覆盖层 将鼠标悬停在图像上以查看效果

你好，世界 /*试试这个*/

.container {
 position: relative;
 width: 50%;
 }

 .image {
 display: block;
 width: 100%;
 height: auto;
 }

 .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  overflow: hidden;
  width: 100%;
  height: 20%;
  transition: .5s ease;
  }

  .container:hover .overlay {
  height: 100%;
   }
   .container .text2{
   display:none;
    }
    .container:hover .text2{
    display:block;
   padding-top:30px;
     }

    .text {
      color: white;
       font-size: 20px;
       position: absolute;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       text-align: center;
    }

---

到目前为止，你用你的例子做了哪些尝试？你试过修改一下吗？在这里发布您的代码，以便我们能够帮助您。在@threeFatCat所说的基础上，尝试解释更多有关预期行为的信息。只看图片，不清楚你想要什么。对不起，我对css很不在行，所以我没有做太多的修改。我想要的是，当你将鼠标悬停在标题上时，包含标题的div将向上滑动并占据整个空间，显示标题下的其他内容。是的，就是这样！非常感谢你！

  <h2>Slide in Overlay from the Bottom</h2>
   <p>Hover over the image to see the effect.</p>

   <div class="container">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
    <div class="overlay">
    <div class="text">Hello World

    <div class="text2"> content 1</div>
    </div>
     </div>
      </div>