Quick little trick to blur an image on mouse hover.


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


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