显示 <div> 的一部分而不是 display: none 用于向上滑动文本显示

Question

我正在使用 CSS 和 JQuery 创建悬停时向上滑动的文本显示。我的挑战是，我只能通过在“类”上使用display: none; 属性来创建这种效果。我希望<div> 中的标题（Admissions）当前被隐藏以始终可见。

我已链接到一些 jpg，它们直观地解释了我正在尝试做的事情。任何帮助，将不胜感激。谢谢！

这是我当前的代码：

$(document).ready(function() {
  $('.img_frame').hover(function() {
    $('.caption', this).slideToggle('slow');
  }, function() {
    $('.caption', this).slideToggle('slow');
  });
});

.img_frame .caption {
  display: none;
  opacity: 0.9;
  background-color: rgb(67, 121, 160);
  width: 100%;
  position: absolute;
  bottom: 0px;
  padding: 5px;
}

.blue_box {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 599px;
  background-color: rgb(67, 121, 160);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="admissions_link img_frame col span_4">
  <div class="blue_box caption">
    <h3>Admissions</h3>
    <p>We understand that parents often start this process with many questions about how to decide what is the best placement for their child. We encourage you to get to know Riverside School and learn how we have worked for over forty years in the Richmond
      community to serve the needs of students with dyslexia and other related language-based learning differences.</p>
    <a href="#" target="_blank">
      <h2 class="learn_btn">LEARN MORE</h2>
    </a>
  </div>
</div>

当前上滑效果：

想要的上滑效果：

Answer 1

您需要做的就是将您的 HTML 更改为

<div class="admissions_link img_frame col span_4">
  <div class="blue_box">
    <h3>Admissions</h3>
    <div class="caption"> <!-- new wrapper class -->
        <p>We understand that parents often start this process with many questions about how to decide what is the best placement for their child. We encourage you to get to know Riverside School and learn how we have worked for over forty years in the Richmond
  community to serve the needs of students with dyslexia and other related language-based learning differences.</p>
        <a href="#" target="_blank">
          <h2 class="learn_btn">LEARN MORE</h2>
        </a>
    </div>
  </div>
</div>

为清楚起见进行编辑：

我从包装器 div.blue_box 中删除了标题类，并在 h3 下创建了一个子包装器，因此当 javascript 关闭 div.caption 时，它只会关闭您想要隐藏的内容。