Blur Hover Effect

This is a nice hover effect you can use for your images. It is pretty simple. You have to create a div class to use for your image. I am going to call it imgblur. Now you have to add it to your style.css and customize it as below (you can change the blur values as well as time values):

.imgblur{
overflow:hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.imgblur:hover{
-webkit-filter: blur(5px);
}

The first line of codes are the duration of your transition. You can change the time depending on how fast you want your image to transform to the blurred one. I will keep mine to 1s. So it starts form the normal image and I want it to get blurred when I hover it, so I set the value to 5px. You can choose whatever value you want. Now you have to add the div class to your image code:

<img src=”URL HERE” class=”imgblur” />

And that’s all. Here is how mine looks out:

Also you can start from a blurred image and get back to the normal one. This is the code:

.imgblur{
overflow:hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-filter: blur(5px);
}

.imgblur:hover{
-webkit-filter: blur(0px);
}

I started with 5px of blur and then I end up with 0px. You add the class to the image code as above and you’re done. Mine looks like this: