To Do: insert example of grayscale effect and explore trimming the edges using “clip” since the blur bleeds outside the actual confines of the image.
Here is an example of applying a blur effect to an image with css on hover:
To get this to work in Firefox we need to add an SVG filter:
[code]
<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg”>
<filter id=”blur”>
<feGaussianBlur stdDeviation=”3″ />
</filter>
</svg>
Saved as a file called blur.svg, our CSS changes to:
img.blur {
width:367; height:459px;
filter: url(blur.svg#blur);
-webkit-filter: blur(3px);
filter: blur(3px);
}:
[/code]
