Article Card - CSS Transition

article-card-css-transition.markdown

Article Card - CSS Transition

1 of 2 cards created for personal site, the article card presents a feature and swipes up to reveal relevant content (behind the scenes).

A Pen by tris timb on CodePen.

License.

index.html

<div class="record_wrap">

<section class="record">
   <div class="record-arrow">
     <img src="http://www.portalguard.com/images/icons/right-arrow.png">
   </div>
   <div id="record1" class="record-display">
     
   </div>
   <div class="record-desc">
     <h1>Bitter Typeface</h1>
     <p>
       Display and promote the typeface and google font 'Bitter' by Sol Matas in a multipage informational website. Highlighting on typeface usage and history in both the web and print.
     </p>
   </div>
</section>
  

<section class="record">
   <div class="record-arrow">
     <img src="http://www.portalguard.com/images/icons/right-arrow.png">
   </div>
   <div id="record2" class="record-display">
     
   </div>
   <div class="record-desc">
     <h1>Bitter Typeface</h1>
     <p>
       Display and promote the typeface and google font 'Bitter' by Sol Matas in a multipage informational website. Highlighting on typeface usage and history in both the web and print.
     </p>
   </div>
</section>


<section class="record">
   <div class="record-arrow">
     <img src="http://www.portalguard.com/images/icons/right-arrow.png">
   </div>
   <div id="record3" class="record-display">
     
   </div>
   <div class="record-desc">
     <h1>Bitter Typeface</h1>
     <p>
       Display and promote the typeface and google font 'Bitter' by Sol Matas in a multipage informational website. Highlighting on typeface usage and history in both the web and print.
     </p>
   </div>
</section>
  
</div>

<div class="tagline">Article Card Animation</div>

style.scss

body {
  background-color:#f2f2f2;
}

.record_wrap {
  width:90%;
  margin:100px auto;
  display:flex;
  justify-content:space-between;
}

.record {
  position:relative;
  width:30%;
  height:20vw;
  overflow:hidden;
  // border:2px solid #ccc;
  @include shadow(1);
  background-color:#fff;
  cursor:pointer;
  transition: box-shadow 300ms;
  &:hover {
    @include shadow(2);
  }
}

.record-arrow {
  position:absolute;
  padding:3%;
  img {
    width:8%;
    height:8%;
  }
  background-image:url("http://www.portalguard.com/images/icons/right-arrow.png");
  transform:translateX(75%);
  opacity:0;
  transition:all 300ms ease-in-out;
}

.record:hover .record-arrow {
  transform:translateX(85%);
  opacity:1;
}

.record-display {
  width:100%;
  height:100%;
  top:0;
  background-image:url("https://cdn.dribbble.com/users/642843/screenshots/3471650/hktrystram_02.jpg");
  background-size:cover;
  background-position:center center;
}
.record:hover .record-display {
  height:20%;
  @include shadow(1);
}

.record-desc {
  margin:20px 0 0 10px;
  h1 {
    margin:5px 0;
    font-size:1.3em;
    font-weight:700;
  }
  p {
    font-size:0.75em;
    line-height:1.4em;
    color:#666;
  }
  opacity:0;
  transition: opacity 400ms ease-in-out 190ms ;
}

#record1 {
  transition:height 700ms cubic-bezier(0.54, 0.21, 0.18, 1.35);
}
#record2 {
  transition:height 500ms cubic-bezier(0.54, 0.21, 0.18, 1.35);
}
#record3 {
  transition:height 300ms cubic-bezier(0.54, 0.21, 0.18, 1.35);
}

.record:hover .record-desc {
  opacity:1;
}

.tagline {
  margin:50px 0;
  text-align:center;
  color:green;
}

styles

<link href="https://codepen.io/tatimblin/pen/VjdNOX" rel="stylesheet" />