Generated by SassMeister.com.

SassMeister-input-HTML.haml

-# Stack Style 1
%figure.stack.stack-sidegrid.stack-bouncygrid
  %img{src:"http://lorempixel.com/200/200/abstract/", alt:"img01"}
  %img{src:"http://lorempixel.com/200/201/abstract/", alt:"img02"}
  %img{src:"http://lorempixel.com/200/202/abstract/", alt:"img03"}
  %img{src:"http://lorempixel.com/200/203/abstract/", alt:"img04"}

SassMeister-input.sass

// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----

@import "compass"

.stack
  margin: 20px auto
  width: 400px
  padding: 0 
  position: relative 
  max-width: 100%
  
  &.bouncygrid.active, &:hover 
    img 
      +transform(scale(0.48))
      
      &:nth-child(4)
        +transform-origin(0, 0) 
        
      &:nth-child(3)
        +transform-origin( 100%, 0)
        
      &:nth-child(2)
        +transform-origin(0, 100%)
      
      &:first-child
        +transform-origin(100%, 100%)
  
  img 
    max-width: 100%
    position: absolute 
    top: 0 
    left: 0 
    transition: all 0.3s
    &:last-child
      position: relative 
      
  

SassMeister-output.css

.stack {
  margin: 20px auto;
  width: 400px;
  padding: 0;
  position: relative;
  max-width: 100%;
}
.stack.bouncygrid.active img, .stack:hover img {
  -moz-transform: scale(0.48);
  -ms-transform: scale(0.48);
  -o-transform: scale(0.48);
  -webkit-transform: scale(0.48);
  transform: scale(0.48);
}
.stack.bouncygrid.active img:nth-child(4), .stack:hover img:nth-child(4) {
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.stack.bouncygrid.active img:nth-child(3), .stack:hover img:nth-child(3) {
  -moz-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  -o-transform-origin: 100% 0;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.stack.bouncygrid.active img:nth-child(2), .stack:hover img:nth-child(2) {
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.stack.bouncygrid.active img:first-child, .stack:hover img:first-child {
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
.stack img {
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
}
.stack img:last-child {
  position: relative;
}

SassMeister-rendered.html

<figure class='stack stack-sidegrid stack-bouncygrid'>
  <img alt='img01' src='http://lorempixel.com/200/200/abstract/'>
  <img alt='img02' src='http://lorempixel.com/200/201/abstract/'>
  <img alt='img03' src='http://lorempixel.com/200/202/abstract/'>
  <img alt='img04' src='http://lorempixel.com/200/203/abstract/'>
</figure>