Article Card Hover

By Laurel Beyers

F6
#
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;
}

JS