<div class="container">
  <div class="fancy_card">
    <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Sqh4MQSK--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/hzc4hdwc234t7p728i5c.jpg" class="card_image">
    <div class="card_text">
      <div class="tags">
        PyTorch
      </div>      
      <h2 class="title"> PyTorch Image Recognition with Convolutional Networks</h2>
      <div class="summary">
        In the last article, we implemented a simple dense network to recognize MNIST images with PyTorch. In this article, we’ll stay with the MNIST recognition task, but this time we’ll use convolutional networks...
      </div>
    </div>
    <div class="card_footer">
      <a href="https://nestedsoftware.com">
        <img class="author_image" src="https://thepracticaldev.s3.amazonaws.com/i/62j2i9zf91agi13gsl6p.jpg" alt="Nested Software">
      </a>
      <div class="reading_time">
        20 min read        
      </div>
    </div>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300);

body {
  margin: 0; /* remove scrollbars */
  padding: 0;
  background: #f4f8fb; /* light grey */
}

h2 {
  margin: 8px 0px 12px 0px;
}

.container {
  display: flex;
  min-height: 100vh; /* expand height to center contents */
  height: 100vh;
  justify-content: center; /* center horizontally */
  align-items: center; /* center vertically*/
}

.fancy_card {
  font-family: Roboto, sans-serif;
  width: 400px;
  border-radius: 5px;
  box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
  overflow: hidden; /* otherwise header image won't respect rounded corners */
  background: white;
  transition: all .5s ease; /* back to normal */
}
.fancy_card:hover {
  transform: translate3D(0,-1px,0) scale(1.03); /* move up slightly and zoom in */
  box-shadow: 8px 28px 50px rgba(39,44,49,.07), 1px 6px 12px rgba(39,44,49,.04);
  transition: all .4s ease; /* zoom in */
  cursor: pointer;
}

.card_image {
  width: 100%; /* forces image to maintain its aspect ratio; otherwise image stretches vertically */
}

.card_text {
  padding: 20px 13px 10px 16px;
}

.tags {
  color: #738a94;
  font-size: 0.9rem;
  line-height: 1em;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.card_footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center; /* vertically align content */
  font-family: roboto, sans-serif;
  padding: 10px 20px 10px 10px;
}

.author_image {
  object-fit: cover; /* don't squish profile image */
  object-position: 30%;  /* move image to the right slightly */
  border-radius: 100%; /* make profile image a circle */
  width: 44px;
  height: 44px;
}

.reading_time {
  color: #738a94;
  font-size: 0.9rem;
  line-height: 33px;
  font-weight: 500;
  text-transform: uppercase;  
  margin-left: auto; /* move over to the right */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.