Search code examples
jqueryhtmlcssslideupjquery-effects

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

I'm using CSS and JQuery to create a slide up text reveal on hover. My challenge is that I can only create this effect by using a display: none; property on the classes ". I'd prefer to have the heading (Admissions) in the <div> that's currently hidden to be visible at all times.

I've linked to a few jpg's that visually explain what I'm trying to do. Any help would be appreciated. Thanks!

Here's my current code:

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

Current Slide Up Effect:

Desired Slide Up Effect:

Solution

  • All you need to do is change your HTML to

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

    Edit for clarity:

    I removed the class of caption from the wrapper div.blue_box and created a sub wrapper under the h3 so when the javascript closes the div.caption it only closes what you want to have hidden.