How to make this image blur with css


Tags: html,css,image,css3,blur

Problem :

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>



Solution :

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>


    CSS Howto..

    How to add tags/images on javascript fetched textarea data?

    How to animate multiple elements at the same time?

    CSS Positioning - How can you fix components in place?

    How to build a mobile version of a non-mobile website? [closed]

    How can have all the images show up on my slider whilst differentiating each image with its own div tag?

    CSS: How to make an image-border

    How to Use CSS transitions

    How to scroll .list-group leaving navigation bar at top

    How to animate a ball travelling pre-defined paths in HTML5, Javascript and CSS?

    how do i change image width in jCarousel?

    How to center the Nav-Bar

    How do I select all elements of a specific class name?

    How to change the input field's text color in MaterializeCSS?

    how to make a div expand to wrap a dynamic content in css

    How to fix the css red notification bubble

    how do i avoid this title from overflowing?

    How to setup a ASP template

    jquery: how to determine if a style is set via css class or hardcoded by style attribute? [duplicate]

    How to get this div into the right position

    How to set select box height in jquery moblie?

    How does tablesort.js create the sort indicator arrows

    How to use div to emulate border for