Показывать часть <div> вместо отображения: нет для раскрытия текста

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>

Текущий эффект Slide Up:

Желаемый эффект Slide Up:

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 он закрывает только то, что вы хотите скрыть.