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

Question

我使用CSS和JQuery在悬停时创建了一个滑动文本显示。我的挑战是我只能通过在类＆＃34;上使用display: none;属性来创建此效果。我希望当前隐藏的<div>标题（招生）始终可见。

我已经联系了几个可以直观地解释我正在尝试做什么的jpg。任何帮助，将不胜感激。谢谢！

这是我目前的代码：

＆＃13;

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当前的上滑效果：

所需的上滑效果：

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时，它只会关闭您想要隐藏的内容。