How to Blur Image on Hover using HTML and CSS
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);
}
-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>
<img src="img/apple.png" alt="apple" />
</div>
![]() |
Live Demo |
|

Comments ( 0 )
Subscribe Latest Information
Categories
Most Popular Posts
How to Withdraw Money from ATM Machine 7steps 1182374 Views
How to Create Chat Application in Android Studio 152899 Views
How to Create a Shopping Cart Application in Android 116235 Views
You May Like Also
Flip Hover Effects using HTML and CSS 5239 Views
Simple image hover effect using CSS 3947 Views
Blur image hover effect using CSS 5343 Views
Flashing image hover effect using CSS 7719 Views