Material Cards Design

index.html

<!-- 

Material Cards Designed especiall for Posts with an Image and Post Information, Along with social buttons.

Responsive using flexbox.

Pure CSS, No JS

Images Used in Pen are Not Mine :

They are of Creative Artist from Dribbble
-Marko Stupic : https://dribbble.com/sweetness-every-day



-->


<div class="card-container">
  <div class="card">
    <div class="card-image"></div>
    <div class="card-info">
      <div class="card-title">Hie</div>
      <div class="card-detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis beatae nisi soluta ex animi aperiam iste voluptatem, voluptatibus impedit rem natus doloribus sed ullam provident sunt odit eaque excepturi modi.</div>
    </div>
    <div class="card-social">
    <ul>
      <li><i class="fa fa-comment-o" aria-hidden="true"></i>
</li>
      <li><i class="fa fa-heart-o" aria-hidden="true"></i></li>
      <li><i class="fa fa-share-alt" aria-hidden="true"></i>
</li>
      </ul>
    </div>
  </div>
  <div class="card">
      <div class="card-image"></div>
    <div class="card-info">
      <div class="card-title">Hello</div>
      <div class="card-detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis beatae nisi soluta ex animi aperiam iste voluptatem, voluptatibus impedit rem natus doloribus sed ullam provident sunt odit eaque excepturi modi.</div>
    </div>
      <div class="card-social">
    <ul>
        <li><i class="fa fa-comment-o" aria-hidden="true"></i>
</li>
        <li><i class="fa fa-heart-o" aria-hidden="true"></i>
</li>
        <li><i class="fa fa-share-alt" aria-hidden="true"></i>
</li>
        </ul>
    </div>
  </div>
  <div class="card">
    <div class="card-image"></div>
    <div class="card-info">
      <div class="card-title">How are you ?</div>
      <div class="card-detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis beatae nisi soluta ex animi aperiam iste voluptatem, voluptatibus impedit rem natus doloribus sed ullam provident sunt odit eaque excepturi modi.</div>
    </div>
    <div class="card-social">
    <ul>
      <li><i class="fa fa-comment-o" aria-hidden="true"></i>
</li>
      <li><i class="fa fa-heart-o" aria-hidden="true"></i>
</li>
      <li><i class="fa fa-share-alt" aria-hidden="true"></i>
</li>
      </ul>
    </div>
  </div>
  <div class="card">
    <div class="card-image"></div>
    <div class="card-info">
      <div class="card-title">What's Up ?</div>
      <div class="card-detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis beatae nisi soluta ex animi aperiam iste voluptatem, voluptatibus impedit rem natus doloribus sed ullam provident sunt odit eaque excepturi modi.</div>
    </div>
    <div class="card-social">
    <ul>
      <li><i class="fa fa-comment-o" aria-hidden="true"></i></li>
      <li><i class="fa fa-heart-o" aria-hidden="true"></i>
</li>
      <li><i class="fa fa-share-alt" aria-hidden="true"></i>
</li>
      </ul>
    </div>
  </div>
</div>

material-cards-design.markdown

Material Cards Design

Material Cards Design Concept.. for Posts.. No JS, Pure CSS.. with Flexbox

A Pen by Viraj Trivedi on CodePen.

License.

script.js

// No JS ;)

style.sass

body
  background: transparentize(blue,0.5)
.card-container
  position: relative
  flex-wrap: wrap
  overflow: hidden
  // background: transparentize(blue,0.5)
  padding-top: 15px
  padding-bottom: 15px
  display: flex
  justify-content: space-around
  align-items: auto
  
.card
  min-width: 275px
  width: 275px
  position: relative
  margin: 15px 15px
  height: 350px
  border-radius: 7px
  background-size: cover
  background: transparentize(black,0.8)
  box-shadow: 5px 5px 10px 1px transparentize(black,0.7)
  transition: 0.2s all linear
  border: 1px solid transparentize(grey,0.85)
  box-sizing: border-box
  .card-social
    position: absolute
    height: 75px
    width: 100%
    background: red
    border-bottom-right-radius: 5px
    border-bottom-left-radius: 5px
    background: transparentize(black,0.4)
    box-shadow: 2px 2px 10px 0px transparentize(black,0.5)
    top: 275px
    ul
      padding: 0
      margin: 0
      list-style: none
      width: 100%
      height: 100%
      display: flex
      justify-content: space-around
      li
        // width: 30%
        height: 100%
        text-align: center
        line-height: 75px
        font-size: 1.5em
        color: transparentize(white,0.15)
        text-shadow: 5px 5px 5px transparentize(black,0.5)
        &:hover
          text-shadow: 7px 7px 5px transparentize(black,0.3)
          transition: all 0.1s linear
  .card-image
    width: 100%
    height: 275px
    position: relative
    background-image: url('https://d13yacurqjgara.cloudfront.net/users/150724/screenshots/2211976/365_the_end_1x.png')
    border-top-right-radius: 5px
    border-top-left-radius: 5px
  .card-info
    position: relative
    width: 100%
    height: 35px
    line-height: 35px
    top: -265px
    border-top-right-radius: 5px
    border-top-left-radius: 5px
    font-family: 'Open Sans'
    color: transparentize(white,0.15)
    .card-title
      line-height: 35px
      height: 35px
      position: relative
      top: 0px
      font-size: 25px
      text-align: center
      background: transparentize(black,0.4)
      box-shadow: 5px 5px 10px 2px transparentize(black,0.7)
    .card-detail
      line-height: 1.5em
      font-size: 1em
      height: 220px
      background: transparentize(black,0.4)
      position: relative
      top: 5px
      padding: 5px 20px 0px 20px
      opacity: 0
      transform: scaleY(0)
      transform-origin: center top
      box-shadow: 5px 5px 10px 2px transparentize(black,0.7)    
  &:hover
    box-shadow: 10px 10px 10px 1px transparentize(black,0.7)
    .card-info    
      .card-title
        box-shadow: 10px 10px 10px 1px transparentize(black,0.7)
        transition: 0.3s all linear
      .card-detail
        opacity: 1
        box-shadow: 10px 10px 10px 1px transparentize(black,0.7)
        transition: 0.35s all linear
        transition-delay: 0.1s
        transform: scaleY(1)

  &:nth-of-type(2)
    .card-image
      background-image: url('https://d13yacurqjgara.cloudfront.net/users/150724/screenshots/2164720/337_writing_blog_post_1x.png')  
  &:nth-of-type(3)
    .card-image
      background-image: url('https://d13yacurqjgara.cloudfront.net/users/150724/screenshots/2377046/kaylo_ren_lighsaber_800x600_1x.png')
  &:nth-of-type(4)
    .card-image
      background-image: url('https://d13yacurqjgara.cloudfront.net/users/150724/screenshots/2203790/362_chasing_dreams_1x.png')

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />