The blur() filter in css also blurs nested images

Question

The blur() filter in css also blurs nested images

Good afternoon. There is a css code that applies the blur filter(5px), but the fact is that it also puts a blur on nested img objects, how to treat this and how to deal with it?

.article_content_img{
    width: 100%;
    max-width: 1120px;
    height: 360px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
       -o-filter: blur(5px);
      -ms-filter: blur(5px);
          filter: blur(5px);
}
.article-img{
    margin-bottom: 25px;
    width: auto;
    height: 360px;
    max-width: 1120px;
    max-height: 360px;
}

And here's what happens in the end:

Code structure:

div.article_content_img > img.article-img

How can this be treated? thanks.

0

css css3 css-filters html5 blur

Author: Kamil NHOT, 2017-04-26

Source

2 answers

score 1 · Answer 1

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #272727;
}

#wrapper {
  position: relative;
  width: 300px;
  height: 180px;
}

#foto {
  position: absolute;
  width: 300px;
  height: 180px;
  background-image: url(http://livefomdet.ru/uploads/images/f/o/t/foto_krasivih_jaguarov.jpg);
  background-size: 100%;
}

#blur {
  position: absolute;
  width: 300px;
  height: 180px;
  background: #ffffff77;
  filter: blur(7px);
}

<div id="wrapper">
  <div id="foto"></div>
  <div id="blur"></div>
</div>

score 0 · Answer 2

I see two solutions:

Do not use blur, but use a blurred png (which I strongly recommend doing!! For blur does not load the page weakly). If you need a smooth change of blur, then I use two images (with and without blurring). Add the opacity: 0 and transition properties, then set the transparency to :hover. That is, when hovering, background changes smoothly. Well, or not when hovering, add the action that is required;
Take out these two elements in a separate div. One of them can be easily stretched and they will be on top of each other.