CodePen Embed - Sliding Card #2 - Animating Transform

<div class="cards">
  <article class="card">
    <a class="card-link" href="#0">
      <img class="card-img" width="900" height="900" src="https://assets.codepen.io/210284/flamingo.jpg" alt="flamingo">
      <div class="card-details">
        <div>
          <div class="card-subtitle">Phoenicopterus roseus</div>
          <h3 class="card-title">Greater Flamingo</h3>
          <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
        </div>
        <div class="card-view-more">
          View more
          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
            <path d="M7 7h8.586L5.293 17.293l1.414 1.414L17 8.414V17h2V5H7v2z" />
          </svg>
        </div>
      </div>
    </a>
  </article>
  <article class="card">
    <a class="card-link" href="#0">
      <img class="card-img" width="900" height="900" src="https://assets.codepen.io/210284/fox_1.jpg" alt="fox">
      <div class="card-details">
        <div>
          <div class="card-subtitle">Vulpes Vulpes</div>
          <h3 class="card-title">Red Fox</h3>
          <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
        </div>
        <div class="card-view-more">
          View more
          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
            <path d="M7 7h8.586L5.293 17.293l1.414 1.414L17 8.414V17h2V5H7v2z" />
          </svg>
        </div>
      </div>
    </a>
  </article>
  <article class="card">
    <a class="card-link" href="#0">
      <img class="card-img" width="900" height="900" src="https://assets.codepen.io/210284/puffin.jpg" alt="puffin">
      <div class="card-details">
        <div>
          <div class="card-subtitle">Fratercula Arctica</div>
          <h3 class="card-title">Atlantic Puffin</h3>
          <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
        </div>
        <div class="card-view-more">
          View more
          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
            <path d="M7 7h8.586L5.293 17.293l1.414 1.414L17 8.414V17h2V5H7v2z" />
          </svg>
        </div>
      </div>
    </a>
  </article>
  <article class="card">
    <a class="card-link" href="#0">
      <img class="card-img" width="900" height="900" src="https://assets.codepen.io/210284/painted-lady.jpg" alt="painted lady">
      <div class="card-details">
        <div>
          <div class="card-subtitle">Vanessa Cardui</div>
          <h3 class="card-title">Painted Lady</h3>
          <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
        </div>
        <div class="card-view-more">
          View more
          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
            <path d="M7 7h8.586L5.293 17.293l1.414 1.414L17 8.414V17h2V5H7v2z" />
          </svg>
        </div>
      </div>
    </a>
  </article>
  <article class="card">
    <a class="card-link" href="#0">
      <img class="card-img" width="900" height="900" src="https://assets.codepen.io/210284/natterjack.jpg" alt="natterjack">
      <div class="card-details">
        <div>
          <div class="card-subtitle">Epidalea calamita</div>
          <h3 class="card-title">Natterjack Toad</h3>
          <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
        </div>
        <div class="card-view-more">
          View more
          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
            <path d="M7 7h8.586L5.293 17.293l1.414 1.414L17 8.414V17h2V5H7v2z" />
          </svg>
        </div>
      </div>
    </a>
  </article>
  <article class="card">
    <a class="card-link" href="#0">
      <img class="card-img" width="900" height="900" src="https://assets.codepen.io/210284/owl.jpg" alt="owl">
      <div class="card-details">
        <div>
          <div class="card-subtitle">Asio Flammeus</div>
          <h3 class="card-title">Short Eared Owl</h3>
          <div class="card-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
        </div>
        <div class="card-view-more">
          View more
          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
            <path d="M7 7h8.586L5.293 17.293l1.414 1.414L17 8.414V17h2V5H7v2z" />
          </svg>
        </div>
      </div>
    </a>
  </article>
</div>

<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

/* BASIC STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

:root {
  --card-height: 430px;
  --initial-visible-card-height: 130px;
  --white: #fff;
  --black: #000;
  --dark-gray: #343434;
  --light-gray: #efefef;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 50px 0;
  background: var(--light-gray);
}

/* CARD STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cards {
  display: grid;
  grid-gap: 40px;
  max-width: 1400px;
  padding: 0 15px;
  margin: 0 auto;
}

.card {
  position: relative;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
  height: var(--card-height);
}

.card,
.card-link {
  display: flex;
}

.card-link,
.card-img {
  width: 100%;
}

.card-img {
  object-fit: cover;
  height: 100%;
}

.card-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: var(--white);
  background: rgba(193, 18, 31, 0.7);
  padding: 40px;
  transform: translateY(calc(100% - var(--initial-visible-card-height)));
  transform-origin: bottom;
  transition: all 0.3s;
}

.card-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
}

.card-subtitle {
  font-weight: normal;
  line-height: 1;
  margin: 0 0 5px;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.14em;
  opacity: 0.4;
}

.card-content,
.card-view-more {
  opacity: 0;
  margin-top: 20px;
  transition: opacity 0.3s;
}

.card-view-more {
  display: flex;
  align-items: center;
  justify-content: right;
}

.card-view-more svg {
  margin-left: 5px;
}

.card-link:hover .card-details {
  transform: none;
  color: var(--black);
  background: var(--white);
}

.card-link:hover .card-content,
.card-link:hover .card-view-more {
  opacity: 1;
  transition-duration: 0;
}

@media (min-width: 750px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
  font-size: 14px;
  background: var(--white);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

This Pen is owned by Envato Tuts+ on CodePen.

See more by @tutsplus on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.