How to Blur Image on Hover using HTML and CSS

In HTML&CSS  |  Last Updated on Mon, 02 May 2016

Hello friends this post is for creating a blur image on hover using HTML and CSS. Blur image on mouse hover can be created using CSS3. This tutorial is very easy and this effect can be easily created using few lines of code. 

CSS Code

.blur img{
            -webkit-webkit-transition:all 1s ease;
            -moz-webkit-transition:all 1s ease;
            -ms-webkit-transition:all 1s ease;
            -o-webkit-transition:all 1s ease;
       }

.blur img:hover{
   -webkit-filter:blur(4px);
       }

HTML Code

<div class="blur">
            <img src="img/apple.png" alt="apple" />   
</div>