Like Us on Facebook

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);
       }


HTML Code

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

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 0 )

    Leave a comment..

    Click to login.