<div class="wrapper">
<div class="inner">
<figure>
<img src="http://lorempixel.com/200/200/nature" alt="Nature">
<figcaption>Nature picture</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/200/200/abstract" alt="Nature">
<figcaption>Abstract image </figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/200/200/animals" alt="Nature">
<figcaption>Animal photo</figcaption>
</figure>
</div>
</div>
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
* {
box-sizing: border-box;
}
body {
font-size: 16px;
}
.wrapper {
perspective: 1000px;
margin: 4em auto;
width: 37em;
}
.wrapper:hover .inner {
transform: rotate(0)
}
.inner {
transition: .3s;
transform: rotateY(40deg);
}
.inner figure {
box-shadow: -6px 6px 2px -3px rgba(100,100,100,.1);
width: 11em;
padding: 1em;
display: inline-block;
margin-right: 1em;
background: rgba(250,200,200,0.1);
border: 1px solid rgba(250,200,200,.5);
}
.inner figcaption {
text-align: center;
margin: .5em 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: bold;
color: darken(tomato, 15%);
}
.inner img {
display: block;
height: auto;
max-width: 100%;
margin: 0 auto;
-webkit-filter: sepia(75%);
}
View Compiled
This Pen doesn't use any external CSS resources.