Card Reveal

By Bryan Lewis

How do I use This?

A card with title, description and a toggle button to reveal more content that overlay's the card.

HTML

<div class="card card-reveal-wrapper">
  <img src="https://placehold.it/568x150">
  <div class="card-section">
    <i class="fa fa-angle-up open-button"><span class="show-for-sr">More</span></i>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga et voluptas, praesentium temporibus est? Recusandae blanditiis eaque ea quam omnis, expedita amet, et eius ipsum quod ipsa, veritatis doloribus enim.</p>
    <div class="card-reveal">
      <span class="card-reveal-title">
        <h4>Card Title</h4>
        <i class="fa fa-angle-down close-button"><span class="show-for-sr">Close</span></i>
      </span>
      <p>Here is some more information. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.</p>
    </div> <!-- /.card-reveal -->
  </div> <!-- /.card-section -->
</div> <!-- /.card -->

$card-reveal-transition-speed: 0.6s;

.card-reveal-wrapper {
  position: relative;

  .open-button,
  .close-button {
    cursor: pointer;
    float: right;
    font-size: rem-calc(14);
    padding-left: 0.5rem;
    text-align: right;
    width: 100%;
  }

  .card-reveal {
    background: $white;
    bottom: 0;
    display: block;
    left: 0;
    overflow: hidden;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 100%;
    transition: top $card-reveal-transition-speed ease-in-out;
  }

  .card-reveal.open {
    top: 0;
    z-index: 1;
  }
}

.card-reveal-wrapper {
  position: relative;
}

.card-reveal-wrapper .open-button,
.card-reveal-wrapper .close-button {
  cursor: pointer;
  float: right;
  font-size: 0.875rem;
  padding-left: 0.5rem;
  text-align: right;
  width: 100%;
}

.card-reveal-wrapper .card-reveal {
  background: #fefefe;
  bottom: 0;
  display: block;
  left: 0;
  overflow: hidden;
  padding: 1rem;
  position: absolute;
  right: 0;
  top: 100%;
  transition: top 0.6s ease-in-out;
}

.card-reveal-wrapper .card-reveal.open {
  top: 0;
  z-index: 1;
}

// Open Card Reveal Click
$('.open-button').click(function(){
  $(this).siblings('.card-reveal').toggleClass('open');
});

// Close Card Reveal Click
$('.close-button').click(function(){
  $(this).parent().parent('.card-reveal').toggleClass('open');
});

Card Reveal

By Bryan Lewis

Article Card Hover

Vertical Testimonial Block

Full-Screen Image Slider

Card Reveal

By Bryan Lewis

Similar Building Blocks

Article Card Hover

Vertical Testimonial Block

Full-Screen Image Slider