overflowstack9 overflowstack9 - 4 months ago 21
CSS Question

How to make this image blur with css

The below is the image which is already blur i mean i want to make other image blur like that image.

Below image with blur to make like the below image

This

The below image without blur but want to make like above image

this2

The below is code i tried i don't know whether i correctly did or not i mean blur takes more effect to the image i just want to make light blur.



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

}

<div><img src="http://i.imgur.com/Cdd4Es3.jpg" /></div>




Answer

Just add a gradient overlay

div {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
div::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, transparent 40%, rgba(255, 255, 255, .8));
}
img {
  display: block;
  filter: blur(2px);
}
<div>
  <img src="http://i.imgur.com/Cdd4Es3.jpg" />
</div>

Comments