Menu
I'm having a problem and I cannot find any solution for this after a lot of searching.
I am using css filter: blur on a div but it is creating dark borders almost like a vignette around the div
How can I remove this?
White blur around image when using CSS3 blur filter?
I am looking for a solution that doesn't include increasing the scale of the div like above
body {
margin: 0;
padding: 0;
background: #000;
}
div {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
width:100vw;
height:100vh;
object-fit: contain;
border:none;
}
img {
width: 100%;
}<body>
<div>
<img src="https://resize.hswstatic.com/w_907/gif/tesla-cat.jpg" />
</div>
</body>
859
A Solution: It's a normal act of css blur on a element when you used a dark background color, in this case you used black background, so when you use blur this happen! for avoid this you should do a trick, use transform: scale on your image and make the parent overflow: hidden with certain width and height
body {
margin: 0;
padding: 0;
background: #000;
}
#pic img {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
object-fit: contain;
transform: scale(1.1);
}
#pic {
width: 100vw;
height: 100vh;
overflow: hidden
}
img {
width: 100%;
}<body>
<div id="pic">
<img src="https://resize.hswstatic.com/w_907/gif/tesla-cat.jpg" />
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
