Card

card.markdown

Card

Experimenting with different styles for cards

A Pen by Merrick on CodePen.

License.

index.html

<div class="cards">
  <div class="card-1">
    <div class="bg">
      <img src="http://www.davidbothered.com/wp-content/uploads/2013/11/nature.png" alt="" />
    </div>

    <div class="info">
      <span class="title">Nature</span>
      <div class="tray">
        <div>
          <i class="fa fa-heart-o" aria-hidden="true"></i> 40
        </div>
        <div>
          <i class="fa fa-retweet" aria-hidden="true"></i> 30
        </div>
        <div>
          <i class="fa fa-globe" aria-hidden="true"></i> 100
        </div>
      </div>
    </div>
  </div>
  
    <div class="card-2">
    <div class="bg">
      <img src="http://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg" alt="" />
    </div>

    <div class="info">
      <div class="title">
        <span class="title-text">
          Nature
        </span>
      </div>
      <div class="more">
        <p>There's nothing I love more than the forrest</p>
        <div class="social">
          <span>
            <i class="fa fa-heart-o" aria-hidden="true"></i> 40
          </span>
          <span>
            <i class="fa fa-retweet" aria-hidden="true"></i> 30
          </span>
          <span>
            <i class="fa fa-globe" aria-hidden="true"></i> 100
          </span>
        </div>
      </div>
      
    </div>
  </div>
  
  <div class="card-3">
    <div class="bg">
      <img src="http://img03.deviantart.net/a46e/i/2012/323/1/0/random_background_by_0rkid-d5ljyqr.jpg" alt="" />
    </div>

    <div class="info">
      <span class="title">Nature</span>
      <div class="tray">
        <span>
          <i class="fa fa-heart-o" aria-hidden="true"></i> 40
        </span>
        <span>
          <i class="fa fa-retweet" aria-hidden="true"></i> 30
        </span>
        <span>
          <i class="fa fa-globe" aria-hidden="true"></i> 100
        </span>
      </div>
    </div>  
    <div class="hover-cover">
      <span>Click to view</span>
    </div>
  </div>
</div>

style.scss

@import url(http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500);
@import url('https://fonts.googleapis.com/css?family=Roboto:300');

html{
  box-sizing: border-box;
  font-family: Fira Sans, Sans-Serif;
  background: #4FC3F7;
}

*, *:before, *:after{
  box-sizing: inherit;
}

.card{
  display: inline-block;
  
  width: 240px;
  height: 300px;
  margin: 5px;
  overflow: hidden;
  
  cursor: pointer;  
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  


  
  .title{
    font-size: 1.2em;
    color: #333;
    margin: 10px;
  }
  

  .tray{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 10px 0; 
  }

  .tray *{
    flex: 1;
    font-size: 1em;
  }  
  .bg{
    text-align: center;
  }
  
  .bg img{
    
    height: 100%;
    width: 150%;
  }
}

.card-1{
  @extend .card;  
  border-radius: 0px;

  .bg{
    height: 70%;
    overflow: hidden;
  }
  .bg img{
    height: 100%; 
  }

  .info{
    padding: 10px;
    width: 100%;
    overflow: hidden;
  }
}

.card-2{
  @extend .card;
  position: relative;
  font-family: Roboto;

   border-radius: 4px;
  
  .bg{
    position: relative;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }
   .bg:after{
      position: absolute;
      content: "";
      left: 0px;
      top: 0px;
      height: 100%;
      width: 100%;
      background: rgba(0,0,0,0);
     
      transition: cubic-bezier(.17,.67,.17,.88) all 0.4s;
      z-index: 4;
    }
  .bg img{
    height: 100%; 
    
    transition: cubic-bezier(.17,.67,.17,.88) all 0.4s;
  }

  .info{
    position: absolute;
    z-index: 2;
    
    bottom: 0px;
    padding: 10px;
    width: 100%;
    height: 20%;
    
    overflow: hidden;
    background: rgba(255,255,255, 1);
    transition: cubic-bezier(.17,.67,.17,.88) all 0.4s;
  }  
  
  &:hover{
    .bg img{
       transform: translateX(-10%)  translateY(-10%) scale(0.9);
    }
    .bg:after{
      position: absolute;
      content: "";
      left: 0px;
      top: 0px;
      height: 100%;
      width: 100%;
      background: rgba(0,0,0,0.2);
      z-index: 4;
    }
    .info{
      height: 50%;
    }   
  }
  
  .title{
    display: flex;
    flex-direction: row;
  }
  
  .title-text{
    flex: 1;
    font-size: 1em;
  }
  
  .social{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    span{
      flex: 1;
    }
  }
  
  .more{
    p{
      font-size: 1em;
    }
  }
}

.card-3{
  @extend .card;
  position: relative;
  border-radius: 4px;
  font-family: Roboto;
  
  &:after{
    content: "";
    position: absolute;
    z-index: 3;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0);
    
    transition: cubic-bezier(.17,.67,.17,.88) all 0.4s;
    
    
  }
  .bg{
    height: 75%;
    overflow: hidden;
    
    transition: cubic-bezier(.17,.67,.17,.88) all 0.4s;
  }
  .bg img{
    height: 100%; 
    
    transition: cubic-bezier(.17,.67,.17,.88) all 0.4s;
  }

  .info{
    padding: 10px;
    width: 100%;
    overflow: hidden;
  }
  .tray span i{
    margin: 4px;
  }
  
  .hover-cover{
    display: flex;
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 0px;
    transform: translateY(100%);
    // transform: scale(0);
    transform: translateX(-100%);
    opacity: 0;
    height: 25%;
    width: 100%;
    background:rgba(76,175,80 ,0.8);
    background: #fff;
    
    
    transition: cubic-bezier(.17,.67,.17,.88) all 0.4s;
    
    font-size: 1.4em;
    // color: #fff;
    align-items: center;
    justify-content: center;
  }
  
  &:hover{
    .bg img{
      transform: translateX(-10%);
    }
    .hover-cover{
      opacity: 1;
      // transform: scale(1);
      // transform: translateY(0%);
      transform: translateX(0%);
    }
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />