Bottom with blur and middle div without

Question

Bottom with blur and middle div without

Navigation

#1 by (1 votes)
#2 by (1 votes)

-2

I have a section , which takes up the whole area of the browser window, and with a background image filling its entire area. Within this section I have a div centralized and with another background image.

I'd like to apply a blur effect to section to blur the background image, but I'd like the div within the section to be unaffected by the effect. The problem is that by applying blur to section , the div within it is also affected. How could I apply blur to section without affecting div ?

Code:

body{
   margin: 0;
   padding: 0;
}

section{
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   background: url(https://images2.alphacoders.com/728/728536.jpg);
   background-attachment: fixed;
   height: 100vh;
   filter: blur(5px);
}

#meio{
   filter: blur(0);
   background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/195173.jpg);
   background-size: cover;
   width: 600px;
   height: 600px;
   border-style: solid;
   border-color: blue;
   border-width: 20px;
   box-shadow: 10px 5px 5px red;
}

<section>
   <div id="meio"></div>
</section>

css

asked by anonymous 27.11.2018 / 20:17

2 answers

Can I use a SELECT within the IF? Create an object reference in its own method

score 1 · Answer 1

When you put some effect on the "parent" you can not remove it from the child. So if the parent has blur , or opacity , or some other effect of this type you can not remove it from the child, the effect will affect both!

Option 1

To avoid the problem you can create a ::after element in the sa section, and in it you put the background with Blur , so you avoid putting Blur directly in the parent, pseudo-element of it.

Here's how:

body {
  margin: 0;
  padding: 0;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(https://images2.alphacoders.com/728/728536.jpg);
  background-attachment: fixed;
  height: 100vh;
  overflow: hidden;
}

section::after {
  content: "";
  background: url(https://images2.alphacoders.com/728/728536.jpg);
  background-attachment: fixed;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  filter: blur(5px);
}

#meio {
  /* filter: blur(0); */
  background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/195173.jpg);
  background-size: cover;
  width: 600px;
  height: 600px;
  border-style: solid;
  border-color: blue;
  border-width: 20px;
  box-shadow: 10px 5px 5px red;
  z-index: 1;
}

<section>
  <div id="meio"></div>
</section>

Option 2

This model I made was removing the child element from within the parent, then using position:absolut and transform:translate I made the alignment. See how the result was.

body {
  margin: 0;
  padding: 0;
}

section {
  /* position: relative; */
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(https://images2.alphacoders.com/728/728536.jpg);
  background-attachment: fixed;
  height: 100vh;
  filter: blur(5px);
  position: absolute;
  width: 100%;
}

#meio {
  filter: blur(0);
  background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/195173.jpg);
  background-size: cover;
  width: 600px;
  height: 600px;
  border-style: solid;
  border-color: blue;
  border-width: 20px;
  box-shadow: 10px 5px 5px red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<section></section>
<div id="meio"></div>

score 1 · Answer 2

Another option would be to put another div-child with absolute position and apply the background and the blur in this div. This div would have the background function of the section.

Creating a pseudo ::after As suggested by @Hugocsl's answer seems to be the best alternative, however, in case you want to manipulate this element with JavaScript at some point, you will not be able to because pseudo-elements are not manipulable via JS, already a common div yes.

Then you would:

body{
   margin: 0;
   padding: 0;
}

section{
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

#meio{
   background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/195173.jpg);
   background-size: cover;
   width: 600px;
   height: 600px;
   border-style: solid;
   border-color: blue;
   border-width: 20px;
   box-shadow: 10px 5px 5px red;
}

#fundo{
   filter: blur(5px);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url(https://images2.alphacoders.com/728/728536.jpg);
   background-attachment: fixed;
   z-index: -1;
}

<section>
   <div id="fundo"></div>
   <div id="meio"></div>
</section>