overflowstack9 overflowstack9 - 1 year ago 133
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


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


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 Source

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);
  <img src="http://i.imgur.com/Cdd4Es3.jpg" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download