html - CSS/HTML 文本在悬停时移动并显示附加文本

Question

所以我有这个容器框，我希望左下角的链接在悬停时稍微向上移动，以显示下面更多、更小的文本!我有一个链接，其中有一个我正在尝试做的例子。抱歉，如果某些 CSS 乱七八糟，请重新开始学习，边走边学。我已经彻底研究并寻求答案。即使您可以将我链接到对您有帮助的页面，我也会非常感激。

Website Here

JSFiddle I have So far

HTML:

<div class ="body_paragraph">
    <div class="body_container">
        <h3><a href="progress">This is the Link</a></h3>
    </div>
</div>

CSS:

.body_paragraph{
    background-color: #222;
    border: 2px solid #111;
    width: 1000px;
    margin: auto;
    margin-top: 50px;
    font-family: Arial;
    font-weight: bold;
    color: #DDDDDD;
    padding: 2px;
    min-height: 500px;

}

.body_container h3{
    font-family: Arial;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    position: absolute;
    bottom: 1px;
    left: 10px;
}

.body_container h3 a{
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

.body_container h3 a:hover{
    font-family: Arial;
    font-weight: bold;
    color: #009dff;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
}

.body_container{
    background-color: #333;
    border: 1px solid #111;
    width: 998px;
    font-family: Arial;
    font-weight: bold;
    font-size: 14px;
    color: #DDDDDD;
    min-height: 299px;
    box-shadow: 1px 5px 10px #111;
    position: relative;

}

Answer 1

$(".link").hover(function() {
    	$(".text-info").html("Some texts here.");
    }, function() {
      $(".text-info").html("");
});

.body_container {
  background: tomato;
  display: flex;
  flex-direction: column;
  height: 80px;
}
a {
  padding-top: 30px;
  position: relative;
  display: block;
  transition-duration: 0.5s;
}
a:hover {
  padding-top: 0px;
  transition-duration: 0.4s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class ="body_paragraph">
    <div class="body_container">
        <a href="progress" class="link"><h3>This is the Link</h3></a>
        <div class="text-info"> </div>
    </div>
</div>

这是您想要实现的目标吗？