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 1178380 Views
How to Create Chat Application in Android Studio 151505 Views
How to Create a Shopping Cart Application in Android 114357 Views
You May Like Also
Flip Hover Effects using HTML and CSS 5101 Views
Simple image hover effect using CSS 3882 Views
Blur image hover effect using CSS 5248 Views
Flashing image hover effect using CSS 7539 Views