Quick little trick to blur an image on mouse hover.

Demo

See the Pen Hover Image Blur by Jonathan klughertz (@klugjo) on CodePen.

Gist

To add blur to an image on mouse, use the following CSS properties:

1
2
3
4
img:hover {
webkit-filter: blur(4px); /* Chrome, Safari, Opera */
filter: blur(4px);
}

The webkit-filter and filter CSS properties can be used with the blur filter function
The :hover pseudo class is used to apply the filter on mouse over