hover cards - unfinished

by Jordan Dayton

HTML

<div class="cards-wrapper">

  <div class="blog-card-container">
    <a href="/community-central/">
      <div class="blog-card spring-fever">
        <div class="title-content">
          <h3><a href="#">10 inspiring photos</a></h3>
          <div class="intro"> <a href="#">Inspiration</a> </div>
        </div>
        <div class="card-info">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim...
          <a href="#">Read Article<span class="licon icon-arr icon-black"></span></a>
        </div>
        <div class="gradient-overlay"></div>
        <div class="color-overlay"></div>
      </div>
    </a>
  </div>

  <div class="blog-card-container">
    <a href="/community-central/">
      <div class="blog-card spring-fever">
        <div class="title-content">
          <h3><a href="#">10 inspiring photos</a></h3>
          <div class="intro"> <a href="#">Inspiration</a> </div>
        </div>
        <div class="card-info">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim...
          <a href="#">Read Article<span class="licon icon-arr icon-black"></span></a>
        </div>
        <div class="gradient-overlay"></div>
        <div class="color-overlay"></div>
      </div>
    </a>
  </div>


</div>

CSS

@import url(//fonts.googleapis.com/css?family=Abril+Fatface|Droid+Serif:400,700,400italic,700italic);
html,
body {
  height: 100%
}

body {
  background: linear-gradient(to bottom, rgba(0, 5, 10, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  font-family: 'Droid Serif', serif;
}

.cards-wrapper {
  text-align: center;
  margin-top: 0;
}

.blog-card-container {
  display: inline-block;
  width: 450px;
  height: 450px;
  padding: 5px;
  vertical-align: top;
  margin: 0 auto;
  position: relative;
}

.blog-card {
  max-width: 450px;
  width: 100%;
  height: 450px;
  position: absolute;
  font-family: 'Droid Serif', serif;
  color: #fff;
  top: 20%;
  right: 0;
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5);
  text-align: center;
  transition: all 0.4s;
  background: url(https://unsplash.it/600/800?image=1061) center no-repeat;
  background-size: 100%;
}

.blog-card a {
  color: #fff;
  text-decoration: none;
  transition: all 0.2s
}

.blog-card .color-overlay {
  background: rgba(64, 84, 94, 0.5);
  width: 550px;
  height: 500px;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card .gradient-overlay {
  background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
  width: 550px;
  height: 500px;
  position: absolute;
  top: 350px;
  left: 0;
  z-index: 15;
}

.blog-card:hover {
  box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75);
}

.blog-card:hover .card-info {
  opacity: 1;
  bottom: 100px;
}

.blog-card:hover .color-overlay {
  background: rgba(64, 64, 70, 0.8);
}

.blog-card:hover .title-content {
  margin-top: 70px
}

.title-content {
  text-align: center;
  margin: 170px 0 0 0;
  position: absolute;
  z-index: 20;
  width: 100%;
  top: 0;
  left: 0;
  transition: all 0.6s
}

.blog-card:hover h3:after {
  animation: changeLetter 0.3s 1 linear;
  width: 80%
}

.blog-card h3,
h1 {
  font-size: 1.9em;
...