public-health-ch/publichealth/static/css/modules/_news.scss

// News overview
#news {

  .panel-default {
    font-size: 90%;
    padding-top: 75%; /* 1:1 Aspect Ratio */
    position: relative; /* If you want text inside of it */
    overflow: hidden;
    background: lighten($brand-primary, 10%);

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .panel-body {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      transform: translateY(60%);
      background-color: rgba($brand-primary, .8);
      transition: transform .65s;

      h3, p {
        color: white;
      }
      h3 {
        padding: 15px;
        font-size: 1.2em;
        margin: 0;
        height: 40%;
        display: table;

        span {
          display: table-cell;
          vertical-align: bottom;
        }

      }
      p, a {
        font-size: .8em;

      }
      p {
        padding: 0 15px;
        line-height: 1.2;
        margin: 0;
      }
      a {
        margin: 10px 0 0 15px;
        text-align: center;
      }
    }
    &:hover .panel-body {
      transform: rotateY(0);
    }

    // expand link over the thumbnail
    a.fill {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: 0;
    }
  }
}

// News detail article
#news-details {
  background: white;
  .category {
    margin-top: 2em;
    display: inline-block;
    text-transform: uppercase;
    font-size: 80%;
    letter-spacing: 2px;
    span {
      border-bottom: 1px solid $text-color;
    }
  }
  .date {
    color: lighten($text-color, 20%);
    font-size: 90%;
    text-transform: uppercase;
    margin-bottom: .5em;
  }
  hr {
    margin-left: 0;
    width: 100px;
  }
  .author {
    color: lighten($text-color, 20%);
    font-size: 90%;
    text-transform: uppercase;
    font-style: italic;
  }
  .backlink {
    margin-top: 3em;
  }
}