Adding a Blur to the Background

Comments (0)

Views (352)

To give an example like this;

<div class="cover">
	<div class="backdrop" style="background-image: url(https://www.themoviedb.org/t/p/original/kfhvcdHZbsUUlf7wQfQremkQHYc.jpg)"></div>
	<h3>The Outlander</h3>
</div>

<style>
    .cover {
    	width: 400px;
    	height: 200px;
    	position: relative;
    	z-index: 1;
    	overflow: hidden;
    }
    
    .cover .backdrop {
    	content: '';
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	filter: blur(5px);
    	z-index: -1;
    	backgrouns-zie: cover;
    	background-position: center;
    }
</style>

When you are stuck while you are coding or when you need to relax yourself comment section is waiting for you. Ask what you don't know, answer what you know !