<div class="effect-container">
	<div class="color-overlay">
		<div class="blur-effect"></div>
	</div>
</div>

.effect-container {
    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;
}
.blur-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-overlay{
    display:none;
    width:100%;
    height:150px;
    background-color:lightblue;
}
.effect-container:hover .blur-effect {
    display:block;
    -webkit-filter: blur(20px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
    opacity: 0.95;
}
.effect-container:hover .color-overlay {
    display:block;
}
body {background-color: #000;}
.test {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}