I'm attempting to stack 4 divs on top of each other using z-index
It's working properly for only 2 divs
When I try to blur the main background (1st bg), it affects all of the divs
What mistake am I making?
Check out the code below:
HTML-
<div class="bg1">
<div class="bg2">
<div class="overlay">
<div class="text-layer">
<p>Eleven years ago, wizards rejoiced all over the world, and Muggles (non-magic folks) were puzzled. They celebrated because He-Who-Must-Not-Be-Named was defeated. In other words, Voldemort (the most evil wizard around) killed Harry Potter's parents,
but for some reason, he couldn't kill baby Harry. Now Voldemort seems to have vanished. Overnight, baby Harry has become a hero known as "The Boy Who Lived." Homeless and orphaned, Harry finds a new home with his Muggle extended family, the Dursleys.</p>
<p>Fast forward to present day, ten-year-old Harry lives with his mean aunt, uncle, and cousin Dudley. During Dudley's birthday trip to the zoo, Harry encounters a friendly snake and inexplicably frees it from its cage against glass. Strange letters begin arriving
for Harry after the zoo visit. Unable to stop them, Harry's furious uncle takes the family to an island in an attempt to escape the onslaught of mail.</p>
<p>Their hiding place doesn't last long as Hagrid appears on Harry's birthday bearing news that Harry is a wizard and has been accepted at Hogwarts School of Witchcraft and Wizardry. The next day, Harry goes shopping for school supplies at Diagon Alley, where he learns more about his magical heritage. He makes a few acquaintances, including Draco Malfoy and his Defense Against the Dark Arts teacher, Quirrell. And of course, Harry gets his first wand. Exciting stuff! Hagrid also retrieves a mysterious package from Gringotts, the goblin-owned bank.</p>
</div>
</div>
</div>
</div>
CSS-
.bg1 {
position: relative;
background-image: url("http://www.hdnicewallpapers.com/Walls/Big/Flowers/Sun_Flower_HD_Image.jpg");
left: 0px;
top: 0px;
z-index: -1;
filter: blur(4px);
-webkit-filter: blur(4px);
}
.bg2 {
background-image: url("https://www.w3schools.com/howto/img_girl.jpg");
height: 100%;
z-index: 1;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: opacity(30%); /* Safari 6.0 - 9.0 */
filter: opacity(40%);
}
.overlay {
z-index: 2;
position: relative;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.text-layer {
height: 100%;
height: 100vh;
z-index: 300 !important;
}
View the live example on jsfiddle- jsfddle