overflowstack9 overflowstack9 - 2 months ago 8
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>


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" />