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

Question

我正在使用 CSS 和 JQuery 创建悬停时显示的向上滑动文本。我的挑战是，我只能通过在类上使用 display: none; 属性来创建这种效果。我更愿意在 <div> 中使用标题（招生）目前处于隐藏状态，以便随时可见。

我已经链接到一些 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 中删除了标题的 class 并在 h3 下创建了一个子包装器，因此当 javascript 关闭 div.caption它只会关闭您想隐藏的内容。

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

Show a portion of a <div> instead of display: none for slide up text reveal

html

css

jquery

slideup

jquery-effects