CSS blur and retain sharp edges using absolute div

user_2273902 0
Viewed 35077

This works just fine if img is not set to absolute:

div img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}
div {
    margin: 20px;
    overflow: hidden;
}

Example working fine: http://jsfiddle.net/ThinkingStiff/b8fLU/ (taken from another question)

But what if I want to do this with an absolute div using background-image?

<div id="background"></div>

#background {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
    filter: blur(5px) brightness(0.75);
    -webkit-filter: blur(5px) brightness(0.75);
    -moz-filter: blur(5px) brightness(0.75);
    -ms-filter: blur(5px) brightness(0.75);
    -o-filter: blur(5px) brightness(0.75);
    position: absolute;
    background-image: url('images/bg.png');
    z-index: 1;
}

How can I achieve the same effect (blur but with sharp edges) using the setup above?

css html
4 Answers
  <div class="absolute overflow-hidden min-w-full h-86">
    <img
      src={image.url}
      class="filter blur relative min-w-full h-90 object-cover transform scale-105" />
  </div>

transform: scale(1.1) on image inside of overflow: hidden; parent can do the trick

user_89543910
Related