A Pen by Ian Thomas.

index.haml

.product
  .product__thumbnail--alt
    %img{src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/9809/range-jellypot.png"}
  %a.product__link.button.button--green.button--full
    Find out more
.product
  .product__thumbnail
    %img{src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/9809/range-lowcal.png"}
  %a.product__link.button.button--green.button--full
    Find out more
.product
  .product__thumbnail
    %img{src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/9809/range-readytoeat.png"}
  %a.product__link.button.button--green.button--full
    Find out more
.product
  .product__thumbnail
    %img{src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/9809/range-tabletsugarfree.png"}
  %a.product__link.button.button--green.button--full
    Find out more

Products-with-shadows-and-hovers.markdown

Products with shadows and hovers

A Pen by Ian Thomas on CodePen.

License.

style.scss

@import "compass";
html{
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9809/paper-1.jpg);
}

.product{
  float: left;
  margin: 30px;
   
  .button{
    @include transform(rotate(-3deg));
    
    &:hover{
      @include transform(rotate(3deg) scale(1.2)); 
    }
  }
  
  &:nth-of-type(odd){
    .button{ 
      @include transform(rotate(3deg));
    
    &:hover{
      @include transform(rotate(-3deg) scale(1.2)); 
    
      }
    }
  }
}

.product__thumbnail{
  position:relative;
  
  width: 220px;
  height: 270px;
  margin-bottom: 2em;
  
  &:before{
    content: '';
    display:block;
    position:absolute;
    z-index: 1;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9809/product-shadow_1.png) no-repeat bottom;
    width :100%;
    height: 100%;
  }
  
  img{
    z-index: 50;
    position: relative;
  }
}

.button{
  @include border-radius(40px);
  @include box-sizing(border-box);
  @include box-shadow(2px 2px 1px rgba(0, 0, 0, 0.1));
  @include inline-block;
  @include transition(background-color 0.5s, transform 0.1s ease-in-out);
  
  text-align: center;
  font-weight: bold;
  color: #fff;
  padding: 12px 8px;
  border:3px solid #fff;
  cursor: pointer;
  
}

.button--green{
  background-color: #5b9d3c;
  
  &:hover{
    background-color: lighten(#5b9d3c, 5%); 
  }
}

.button--full{
  width: 100%;
}