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

  #myDiv {
        width:280px;
        height:200px;
        background-image:url(http://www.cnetfrance.fr/i/edit/2013/06/39791275/620x465/ios-7.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    #effect{
        display:none;
        width:100%;
        height:150px;
        background-image:url(http://www.cnetfrance.fr/i/edit/2013/06/39791275/620x465/ios-7.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    #color{
        display:none;
        width:100%;
        height:150px;
        background-color:lightblue;
    }
    #myDiv:hover #effect {
        display:block;
        opacity: 0.95;
    }
    #myDiv:hover #color {
        display:block;
    }    -webkit-filter: blur(20px);
        -moz-filter: blur(15px);
        -o-filter: blur(15px);
        -ms-filter: blur(15px);
        filter: blur(15px);
        opacity: 0.95;
    }
    #myDiv:hover #color {
        display:block;
    }

Now the HTML part will go like this:-

<div id="myDiv">
    <div id="color">
        <div id="effect"></div>
    </div>
</div>
<p>Put mouse on screen</p>

Source by JS fiddle