Как сделать это размытие изображения с помощью css

Question

Ниже изображение, которое уже размыто, я имею в виду, что хочу сделать другое размытие изображения таким образом.

Ниже изображения с размытием, чтобы сделать, как на рисунке ниже

На рисунке ниже без размытости, но хотите сделать как изображение выше

Внизу кода я попытался я не знаю, правильно ли я это сделал или нет. Я имею в виду, что размытие больше влияет на изображение, я просто хочу размыть свет.

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 1

Просто добавьте 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>

Answer 2

Вы можете добавить несколько фильтров, чтобы получить желаемый результат. Я бы добавил фильтр яркости и увеличил яркость изображения до 200%.

img { 
    -webkit-filter: brightness(200%) blur(1px); 
    filter: brightness(200%) blur(1px); 
} 

jsFiddle link

Answer 3

Вы можете попробовать добавить еще один фильтр CSS, чтобы осветлить IMG подобное;

яркость (110%);

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

}