Article Card Hover

By Laurel Beyers

media blog card animation hover interaction

How do I use This?

Article Card with hover effect and a nice overlap on the image with details for topic, author, title, summary and time to read.

HTML

<div class="card-article-hover card">
  <a href="">
    <img src="https://unsplash.it/600/400">
  </a>
  <div class="card-section">
    <p class="meta-data article-subtext">GARDENING | 10 MIN READ</p>
    <a href="">
      <h3 class="article-title">Succulents, how much water do they need?</h3>
    </a>
    <p class="article-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos corporis autem, iusto impedit veniam unde earum neque...</p>
  </div>
  <div class="card-divider flex-container align-middle">
    <img class="avatar" src="https://placehold.it/50x50" alt="avatar">
    <a href="" class="author">BEAN MCGRUBER</a>
  </div>
  <div class="hover-border">
  </div>
</div>

$white: #fff;
$black: #000;
$highlight: #2daebf;
$shadow: #888888;

.card-article-hover {
  box-shadow: 0px 0px 7px $shadow;

  .card-section {
    width: 90%;
    background: $white;
    margin: 0 auto;
    padding-top: 25px;
    margin-top: -3rem;
    z-index: 2;

    .article-subtext {
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 0.85rem;
    }

    .article-title {
      font-weight: bold;
      font-family: ‘Georgia’, serif;
      font-size: 1.5rem;
      color: $black;
    }

    .article-desc {
      font-family: ‘Georgia, serif;
      font-size: 1rem;
    }
  }

  .card-divider {
    background: $white;

    .author {
      text-transform: uppercase;
      letter-spacing: 2px;
      color: $highlight;
    }
  }

  .hover-border {
    height: 10px;
    width: 450px;
    background: $highlight;
    width: 0;
    transition: width 1s ease;
  }

  &:hover .hover-border {
    height: 10px;
    width: 450px;
    transition: width 1s ease;
  }

  .author {
    color: navy;
  }

  .avatar {
    border-radius: 50%;
    margin: 0 1rem;
  }

  .meta-data {
    text-transform: uppercase;
  }
}

@charset "UTF-8";

.card-article-hover {
  box-shadow: 0px 0px 7px #888888;
}

.card-article-hover .card-section {
  width: 90%;
  background: #fff;
  margin: 0 auto;
  padding-top: 25px;
  margin-top: -3rem;
  z-index: 2;
}

.card-article-hover .card-section .article-subtext {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
}

.card-article-hover .card-section .article-title {
  font-weight: bold;
  font-family: ‘Georgia’, serif;
  font-size: 1.5rem;
  color: #000;
}

.card-article-hover .card-section .article-desc {
  font-family: ‘Georgia, serif;
  font-size: 1rem;
}

.card-article-hover .card-divider {
  background: #fff;
}

.card-article-hover .card-divider .author {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #2daebf;
}

.card-article-hover .hover-border {
  height: 10px;
  width: 450px;
  background: #2daebf;
  width: 0;
  transition: width 1s ease;
}

.card-article-hover:hover .hover-border {
  height: 10px;
  width: 450px;
  transition: width 1s ease;
}

.card-article-hover .author {
  color: navy;
}

.card-article-hover .avatar {
  border-radius: 50%;
  margin: 0 1rem;
}

.card-article-hover .meta-data {
  text-transform: uppercase;
}

Article Card Hover

By Laurel Beyers

Comment Section

Card Profile Stats

Product Feature Section

Article Card Hover

By Laurel Beyers

Similar Building Blocks

Comment Section

Card Profile Stats

Product Feature Section