9

I'm trying to use a css blur filter while maintaining the opacity of an image. In the example below I have an image that is just a blue square. When I apply a blur filter the edges end up becoming transparent and you can see the black div underneath. Is there any way to apply blurring without this transparency being introduced? Ideally, I would want it to only include visible pixels inside of the span in the averaging. I understand that in this example it would result in just a solid blue square but for less trivial cases it would give the result that I'm looking for.

div {
  background-color: black;
  width: 100px;
  height: 100px;
}
span {
  overflow: hidden;
  -webkit-filter: blur(30px);
  display: block;
}
<div>
  <span>
    <img width="100px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/600px-000080_Navy_Blue_Square.svg.png">
  </span>
</div>
Ivanna
  • 1,197
  • 1
  • 12
  • 22

2 Answers2

1
img {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    margin: -5px -5px -5px -5px;
}

div {
    display: inline-block;
    overflow: hidden;
}

http://jsfiddle.net/serGlazkov/nv6evzmk/

sglazkov
  • 1,046
  • 1
  • 10
  • 38
  • 2
    The issue isn't hiding the overflow, it's that the image gets made transparent and you can see the black beneath it. – Ivanna Sep 18 '15 at 19:38
0

Try to look here:

How to apply a CSS 3 blur filter to a background image

https://css-tricks.com/almanac/properties/f/filter/

http://www.inserthtml.com/2012/06/css-filters/ <---- (I think this is very similar to what you are looking for.)

Community
  • 1
  • 1
Nick Willumsen
  • 100
  • 2
  • 10