<div class="cardfan">
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/florence.jpg" alt="Photograph of Florence, Italy" id="roma">
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/roma.jpg" alt="Photograph of an ancient aqueduct, Italy" id="aqueduct">
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/bike.jpg" alt="Photograph of a bike on a Roman Street" id="bike">
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />
</filter>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="sepia">
<feColorMatrix values="0.14 0.45 0.05 0 0
0.12 0.39 0.04 0 0
0.08 0.28 0.03 0 0
0 0 0 1 0" />
</filter>
</svg>

div.cardfan { 
  width: 33%;
  margin: 2rem auto;
  position: relative; 
}
div.cardfan img { 
  position: absolute; 
  width: 100%; 
  height: auto; 
  border: 12px solid #ffe; 
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2); 
  transform-origin: center 400px; 
  transition: all 1s linear; 
}
div.cardfan img:first-child { 
  transform: rotate(5deg);  
}
div.cardfan img:last-child { 
  transform: rotate(-5deg); 
}
div.cardfan:hover img:first-child { 
  transform: rotate(25deg); 
}
div.cardfan:hover img:last-child { 
  transform: rotate(-25deg);  
}

img#aqueduct {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(#greyscale);
  filter: gray;
}
img#aqueduct:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  filter: none;
}
img#bike {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
  filter: url(#sepia);
  background-color: #5E2612;
  filter: alpha(opacity = 50);
}
img#bike:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
  filter: alpha(opacity = 100);
  filter: none;
}
img#roma {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  filter: url(#blur); 
}
img#roma:hover {
  -webkit-filter: blur(0px);
  filter: blur(0px);
  filter: none;
}