<div class="image-container">
  <img class="image" src="http://farm9.staticflickr.com/8499/8306834321_6f53b5324e_n.jpg" width="150" height="150"> <img class="image" src="http://farm9.staticflickr.com/8493/8315297998_73cedef917_n.jpg" width="150" height="150"> <img class="image" src="http://farm9.staticflickr.com/8500/8338782000_da76a9232c_n.jpg" width="150" height="150">
  
</div>
<p class="by">All photos by the great <a href="http://www.flickr.com/photos/mariesol/">SunnyMarry</a></p>
@import "compass/css3";

body {background:#ddd;padding:1%;}
.image-container {
  padding:20px;
  overflow:hidden;
  position:relative;
  img {
    position:relative;
    float:left;
    border:5px solid white;
    margin:10px;
    box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
    transition: all 100ms linear;
    transform: scale(0.9);
    -webkit-filter: grayscale(100%) blur(2px);
    &:hover {
      transform: scale(1);
      -webkit-filter: none;
    }
  }
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.