TyBs Patterns

Peek-a-boo Card 

<div class="card border-0 rounded-0 card-peek">
    <div class="card-img">
        <img data-lazyimage="../../img/unsplash/alex-knight-4NJoYCuWDok-unsplash.jpg" alt="alt tag for the image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' /%3E">
    </div>
    <div class="card-img-overlay d-flex flex-column justify-content-end align-items-start">
        <div class="content-label px-2 d-inline-block make-inview animate-wipe bg-dark text-white">Label Text</div>

        <h3 class="card-peek-title d-inline-block p-2 font-weight-bold make-inview animate-wipe"><a href="#">Excepteur Sint Occaecat</a></h3>
        <div class="card-peek-content px-2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>
 
<div class="card border-0 rounded-0 card-peek">
    <div class="card-img">
      {{ render '@lazyimage' }}
    </div>
    <div class="card-img-overlay d-flex flex-column justify-content-end align-items-start">
      {{ render '@tag--animated' }}
      <h3 class="card-peek-title d-inline-block p-2 font-weight-bold make-inview animate-wipe"><a href="#">Excepteur Sint Occaecat</a></h3>
      <div class="card-peek-content px-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
 
/* No context defined for this component. */
  • Content: 
    $card-peek-break:520px !default;
$card-peek-max:640px !default;
$card-peek-timing:0.25s !default;
.card-peek {
  &.js-processed {
    @media (min-width:$card-peek-break) {
      cursor:pointer;
    }
  }
  .card-img {
    background-color:var(--primary);
    height:0;
    overflow:hidden;
    padding-top:62.5%;
    position:relative;
    width:100%;
    z-index:1;
    img {
      filter:blur(0px) brightness(1);
      height:100%;
      left:0;
      object-fit:cover;
      object-position:center center;
      position:absolute;
      top:0;
      width:100%;
    }
  }
  .card-img-overlay {
    z-index:2;
    @media (max-width:$card-peek-break - 1px) {
      padding-left:0;
      padding-right:0;
      position:static;
    }
    @media (min-width:$card-peek-max) {
      &:before {
        // this is here to keep the text from moving all the way to the top
        content:"";
        display:block;
        flex:2;
      }
    }
    * + * {
      @media (min-width:$card-peek-break) {
        margin-top:0;
      }
    }
    .card-peek-title {
      transition:background-color $card-peek-timing ease-in-out;
      @media (max-width:$card-peek-break - 1px) {
        padding:0 !important;
      }
      @media (min-width:$card-peek-break) {
        background-color:var(--primary);
        color:white;
      }
      a {
        @media (min-width:$card-peek-break) {
          color:white;
        }
      }
    }
    .card-peek-content {
      @media (max-width:$card-peek-break - 1px) {
        padding:0 !important;
      }
      @media (min-width:$card-peek-break) {
        color:white;
        flex:0;
        overflow:hidden;
        position:relative;
        transition:all $card-peek-timing ease-in-out;
      }
    }
  }
  &:hover {
    .card-img img {
      @media (min-width:$card-peek-break) {
        filter:blur(5px) brightness(0.5);
        opacity:0.6;
      }
    }
    .card-img-overlay {
      .card-peek-title {
        @media (min-width:$card-peek-break) {
          background-color:transparent;
        }  
      }
    }
    .card-peek-content {
      flex:1;
    }
  }
}
  • URL: /components/raw/peekaboo/peekaboo.scss
  • Filesystem Path: source/patterns/organisms/cards/peekaboo/peekaboo.scss
  • Size: 2.1 KB

Peekaboo Card

This pattern is a variation on the Bootstrap (Image Overlay Card)[]. This version of the card improves upon the Image Overlay component in a few ways

  • Responsiveness
  • Readability
  • Image Sizing

This pattern also makes more of the image visible by hiding the card text until the user hovers over the image. On hover, the text “peeks” up from the bottom of the card and the image darkens and blurs for improved readability.

Limitations

The following text length limis are recommended:

  • Title no more than 40 characters
  • Text no more than 140 characters (an OG tweet).

Responsiveness

This pattern addresses responsiveness by reverting to a basic card at small screen widths. This behavior will allow the image to be visible at small screen sizes and helps make sure that the text does not overflow the overlay.

Readability

With the default component, it is very easy to create content where the text is not readable because of its placement over the image. This version provides background colors with suitable contrast to make sure the text is readable.

Image Sizing

This pattern is styled for an image with a 16:10 aspect ratio. However, the styles can be changed to accommodate images of different aspects. The styles for the card image use object fitting that will limit the selected image to the specified aspect ratio.