Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to make blur overlay effect using CSS

    @abhishek.tiwari.458
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 782
    Comment on it

    Hello Reader's, If you have to make the beautiful overlay of blur effect of image on the screen then you can learn it from the code below. This is done by using CSS 3

    Put the css as 

    1.   #myDiv {
    2.         width:280px;
    3.         height:200px;
    4.         background-image:url(http://www.cnetfrance.fr/i/edit/2013/06/39791275/620x465/ios-7.jpg);
    5.         background-size: cover;
    6.         background-repeat: no-repeat;
    7.     }
    8.     #effect{
    9.         display:none;
    10.         width:100%;
    11.         height:150px;
    12.         background-image:url(http://www.cnetfrance.fr/i/edit/2013/06/39791275/620x465/ios-7.jpg);
    13.         background-size: cover;
    14.         background-repeat: no-repeat;
    15.     }
    16.     #color{
    17.         display:none;
    18.         width:100%;
    19.         height:150px;
    20.         background-color:lightblue;
    21.     }
    22.     #myDiv:hover #effect {
    23.         display:block;
    24.         opacity: 0.95;
    25.     }
    26.     #myDiv:hover #color {
    27.         display:block;
    28.     }    -webkit-filter: blur(20px);
    29.         -moz-filter: blur(15px);
    30.         -o-filter: blur(15px);
    31.         -ms-filter: blur(15px);
    32.         filter: blur(15px);
    33.         opacity: 0.95;
    34.     }
    35.     #myDiv:hover #color {
    36.         display:block;
    37.     }

    Now the HTML part will go like this:-

    1. <div id="myDiv">
    2.     <div id="color">
    3.         <div id="effect"></div>
    4.     </div>
    5. </div>
    6. <p>Put mouse on screen</p>

    Source by JS fiddle

    html css
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: