png example

HTML

<script src="http://www.useragentman.com/tests/pointerEvents/js/jquery.cycle.all.js"></script>
<script src="http://www.useragentman.com/tests/pointerEvents/js/tv.js"></script>
<main>
<div class="example" id="svg-example">
<img src="http://www.useragentman.com/tests/pointerEvents/images/disney-tv.png" />
<div class="slides">
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/robot-with-kid.jpg" />
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/john-and-paul.jpg" />
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/kid-gun.jpg" />
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/wierd.jpg" />
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/please-stand-by.jpg" />
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/ebs.jpg" />
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/mushroom-cloud.jpg" />
    </div>
  </div>

CSS

body {
  margin: 0px;
  padding: 0px;
}
main, .example {
	position: relative;
	width: 495px;
	height: 417px;
}


.example {
	margin: 0 auto 20px auto;
}


#example1 {
	float: left;
	margin: 0 10px 10px 0;
}


main, [data-polyclip], .slides, .example object, .example svg, .example img  {
	position: absolute !important;
}

[data-polyclip], .example object, .example img, .example svg {
	z-index: 10;
	pointer-events: none;
}

.slides {
    left: 61px;
    top: 195px;
    z-index: 5;
    cursor: pointer;
    transform: skew(0, 3deg) scale(0.89, 0.84);
    -webkit-transform: skew(0, 3deg) scale(0.89, 0.84);
    -ms-transform: skew(0, 3deg) scale(0.89, 0.84);
    
    
}

.slides, .slides img {
	height: 150px;
  width: 150px;
  border: none;
  margin: 0;
  padding: 0;
}


.slides {
	
	filter: blur(1px); 
	-webkit-filter: blur(1px); 
	-moz-filter: blur(1px);
	-o-filter: blur(1px); 
	-ms-filter: blur(1px); 
	
	 filter: url("data:image/svg+xml;utf8,<svg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur\'><feGaussianBlur stdDeviation=\'1\' /></filter></svg>#blur"); /* browsers that don't do non-SVG filters (Firefox) */
}

html.ie.lte8 .slides,
body.ie8down .slides {
	
	/* Adjustment to compensate for the how Visual filter moves the slides after transform */
	left: 70px;
  top: 203px;
  
	filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.89,
            M12=0,
            M21=0.046642923561907156,
            M22=0.84,
            SizingMethod='auto expand'), blur(1px);
  
  
}

html.ie.lte8 .slides:hover,
body.ie8down .slides:hover
 {
	left: 70px;
  top: 203px;
  
	filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.89,
            M12=0,
            M21=0.046642923561907156,
            M22=0.84,
            SizingMethod='auto expand');
}

.slides:hover {
	
  filter: none;  
	-webkit-filter: none; 
	-moz-filter: none;
	-o-filter: none; 
	-ms-filter: none;
}