I have a banner and an avatar image on it. I have tried to add the blur effect to my banner but I have an error since the effect is done on my avatar and not on my banner.
To understand what I want, I share my JSFiddle with you .
This is my code:
.fondo_banner {
background-image: url(https://www.walldevil.com/wallpapers/a49/desktop-wallpaper-nepal-background-wallpapers.jpg);
background-repeat: no-repeat;
background-position: 100%;
background-size: cover;
margin: 0 auto 1em;
position: relative;
height: 240px;
}
.overlay_fondo_banner {
background-color: rgba(69, 90, 100, 0.6);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*filter: blur(15px);*/
}
#pUsuario_avatar {
background-image: url(http://pia.az/photos/gffbff.jpg);
position: relative;
width: 85px;
height: 85px;
background-size: cover;
background-position: top center;
border-radius: 50%;
margin: 15px auto;
cursor: pointer;
}<div class="fondo_banner">
<div class="overlay_fondo_banner">
<div id="pUsuario_avatar">
</div>
</div>
</div>
The problem is that the blur effect is applied to the entire element (including descendants). Since the avatar is inside the
divone you're blurring, the avatar will also be blurred.One solution would be to move the avatar outside of the element you're going to blur (create a container for everything). Also, the blur effect should be applied to the
divone containing the background image to make it look blurry (which you'll also set an absolute position to take up the full size of the parent).Something like this:
There is a way to achieve it without the need to add or alter the html and that is by taking advantage of pseudo- selectors
:before o :after, although they already gave you a solution (which is perfectly valid), I suggest you review this other one, which may also be interesting to know. :)Look:
The first thing you have to do to achieve this is to create the pseudo-element selector, which what it does in a few words is to generate another html element, without modifying the html (imagine the possibilities hehe), we create this like this:
That yes, nothing will be seen unless you put what type of content it will have inside, in this case it will not have anything, like this:
Now although it will be empty, it will have a background so we pass all the background image data to this selector.
Now you have to tell it to occupy the entire parent element (which must necessarily have a
position: relative, which in your case already has), since initially this element is of typeinlineit will not take the width and height, without assigning it first. to behave like a block element or ( inline block or if you want flex , table , etc), once we do this we can add an absolute position and a z-index, for layer control.And so that when hovering, the blur is added, you must compose the selector like this:
In fact, this technique is so useful, that you could even do without the other element in the html that was the overlay layer , in fact in the example I did.
The only drawback (if we can call this technique inconvenient) is that it only has a maximum creation (for now) of up to 2 elements (
after y before).I think what you are looking for is the following:
For this type of effects it is necessary to use positioning with its respective z-index.