<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.