#CSS #Hover #Blur

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:

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

#CSS #Hover #Blur