%ul
  - (1..9).each do |i| 
    %li
      %img(src="http://sjmcpherson.com/codepen/#{i}.jpg")
  
  

html,body{background-color:#333}

ul {
  display: table;padding: 10px 0 10px 0;list-style: none; width:600px; margin:0 auto;
  &:hover li{opacity:.8; -webkit-filter: blur(5px); filter: blur(5px);}
  li {
    cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); float: left;margin: 1px;width: 180px;  height: 180px;  opacity: 1; transition: all .3s linear;
    &:hover {
    box-shadow: 0 5px 15px gba(0,0,0,0.4);opacity: 1;transform: scale(1.08);-webkit-filter: blur(0);filter: blur(0);
    }
  }
}

//Works best on Webkit Browsers