Adapted cross browser blurry image solution
Cross-browser blur for images: CSS3 filters for Webkit, MS proprietary code for IE, SVG filter for Firefox. Hover transition to sharpen. More details in the related entry on my blog.
Forked from Dudley Storey's Pen Cross-Browser Image Blur With Transition.
A Pen by Mario Winkler on CodePen.
| <ul class="imagelist"> | |
| <li> | |
| <img src="https://farm5.staticflickr.com/4014/4240185603_d7341dd1b9.jpg" width="60" height="80"> | |
| <p>Original Picture</p> | |
| </li> | |
| <li> | |
| <img class="blur" src="https://farm5.staticflickr.com/4014/4240185603_d7341dd1b9.jpg" width="60" height="80"> | |
| <p>CSS / Filter Blurring</p> | |
| <p>All except IE <a href="http://caniuse.com/#feat=css-filters">[caniuse.com --> css blur]</a></p> | |
| </li> | |
| <li> | |
| <svg style="width:60px;height:80px"> | |
| <defs> | |
| <filter id="blurFilter" > | |
| <feGaussianBlur stdDeviation="4" /> | |
| <filter /> | |
| </defs> | |
| <image xlink:href="https://farm5.staticflickr.com/4014/4240185603_d7341dd1b9.jpg" alt="Blurry Picture" width="60" height="80" filter="url(#blurFilter)" /> | |
| </svg> | |
| <p>SVG Blurring</p> | |
| <p>IE10+ <a href="http://caniuse.com/#search=blur">[caniuse.com --> svg blur]</a></p> | |
| </li> | |
| </ul> |
| $(function() { | |
| var supportsSvgImageBlur = function() { | |
| var svgImageSupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1"), | |
| blur; | |
| if (!svgImageSupport) return false; | |
| blur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); | |
| blur.setAttribute("stdDeviation", "2"); | |
| return (typeof blur.setStdDeviation !== 'undefined' ); | |
| }; | |
| if(supportsSvgImageBlur()){ | |
| $(".imageContainer").find("img.blur").remove(); | |
| } | |
| else { | |
| $(".imageContainer").find("#svgContainer").remove(); | |
| } | |
| }); |
| img.blur { | |
| filter: url(#blurFilter); | |
| -webkit-filter: blur(3px); | |
| -moz-filter: blur(3px); | |
| -o-filter: blur(3px); | |
| -ms-filter: blur(3px); | |
| filter: blur(3px); | |
| filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); | |
| } | |
| /* Alignment just for presentation*/ | |
| html, body{ | |
| width: 100%; | |
| height: 100%; | |
| display: table; | |
| } | |
| .imagelist { | |
| list-style: none; | |
| display: table; | |
| > li { | |
| display: table-row; | |
| > * { | |
| display: table-cell; | |
| vertical-align: top; | |
| text-align: left; | |
| padding: 10px; | |
| } | |
| } | |
| } | |
| .imageContainer { | |
| display: table-cell; | |
| width: 100%; | |
| text-align: center; | |
| vertical-align: middle; | |
| height: 100%; | |
| } |