<ul class='cards'>
  <li>
    <div>
    <h4>Title 1</h4>
    <p>Text in box</p>
    </div>
  </li>
  <li>
    <div>
    <h4>Title 2</h4>
    <p>Text in box</p>
       <p>Text in box</p>
    </div>
  </li>
    <li>
    <div>
    <h4>Title 3</h4>
    <p>Text in box</p>
       <p>Text in box</p>
    </div>
  </li>
    <li>
    <div>
    <h4>Title 4</h4>
    <p>Text in box</p>
    </div>
  </li>
</ul>

@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');

.cards{
  list-style:none;
  font-family: 'Shadows Into Light', cursive;
  
  li{
    float:left;
    margin: 1em;
    div{
      width: 200px;
      height: 200px;
      background: #ccc;
      padding:10px;
      box-shadow: 2px 2px 2px #ccc;
      transition-duration:0.5s;
      z-index:1;
      &:hover, &:focus{
        z-index:1000;
        position:relative;
      }
     
      h4{
         font-size: 18px;
      }
      p{
        font-size: 15px;
        font-weight:normal;
      }
    }
    &:nth-child(1){
      div{
        background: #cffdd5;
        -webkit-transform:rotate(10deg);
        -o-transform:rotate(10deg);
        -moz-transform:rotate(10deg);
        transform: rotate(10deg);
         &:hover, &:focus{
          -webkit-transform: scale(1.25);
          -moz-transform: scale(1.25);
          -o-transform: scale(1.25);
      }
      }
    }
    &:nth-child(2){
      div{
        background: #fdf5cf;
        -webkit-transform:rotate(5deg);
        -o-transform:rotate(5deg);
        -moz-transform:rotate(5deg);
        transform: rotate(5deg);
         &:hover, &:focus{
           -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
      }
      }
    }
    &:nth-child(3){
      div{
       background-color: #fdcfe4;
        -webkit-transform:rotate(-4deg);
      -o-transform:rotate(-4deg);
       -moz-transform:rotate(-4deg);
        transform: rotate(-4deg);
         &:hover, &:focus{
          -webkit-transform: scale(1.25);
          -moz-transform: scale(1.25);
          -o-transform: scale(1.25);
      }
      }
    }
    &:nth-child(4){
      div{
       background-color: #cfeafd;
        -webkit-transform:rotate(10deg);
       -o-transform:rotate(10deg);
        -moz-transform:rotate(10deg);
        transform: rotate(10deg);
         &:hover, &:focus{
          -webkit-transform: scale(1.25);
          -moz-transform: scale(1.25);
          -o-transform: scale(1.25);
      }
      }
    }
  }
}