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


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="" /></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);
  <img src="" />

    CSS Howto..

    How to make div expandable with content while setting min height property as well in CSS

    CSS - how to make image container width fixed and height auto stretched

    how to make labels and button appear only when mouse is over a div in C#

    How to apply css styles to a tag?

    How to center a span element in CSS? [closed]

    how to set css position absolute in hover state

    How to recreate Mac like File Browser in all OS with JS/CSS

    How to start a css animation from current position

    How to use easeOutBounce animiation on display block?

    How to apply different css style to gwt datagrid widget in the same page? [duplicate]

    How to handle this CSS issue with Wordpress?

    How to place three div tags one below another?

    How to make gutter between columns in a CSS grid system

    how to I make my responsive website look normal on galaxy s4 (media query)

    How to override font-size (em) in this condition?

    How to exclude a CSS formatting? [duplicate]

    How do check the Css properties for an element when pressed in Google Chrome Developer Tools

    How to to make a gap between rows in FlowPanel in Css in Gwt?

    How to put a table inside an inline-block element where cells have a percentage width

    how to make those two divs in one line

    How to get page-header and nav-pills to appear on the same line

    How to create click-able CSS sprite with rather than Javascript?

    CSS hover transition - how to remove delay?

    CSS how to push text away from border

    How to get all select element in JQuery

    How to make all the content placed in the center of div?

    How do I restrict style to affect content only in modal?

    How to use global stylesheet with css loader

    HTML CSS How to stop a table cell from expanding

    How to make my twitter bootstrap overlap all other elements?