Как сделать эффект размытия без белого света?

Question

Я использую следующий CSS свойство для установки blur эффекта:

-webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 

Это делает Div элемент blur, но я вижу белый свет в углах блока, как я могу сделать blur effect без них?

Answer 1

Единственный способ, чтобы удалить размытые края в чистом CSS способом является масштабирование элемента немного затем отсечение края с overflow: hidden добавлен в контейнере:

.container { 
 
    overflow: hidden; 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
} 
 

 
.blur { 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
    transform-origin: 50%; 
 
    transform: scale(1.3); 
 
}

<div class="container"> 
 
    <div class="blur"> 
 
    <img src="http://lorempixel.com/700/300" alt=""> 
 
    </div> 
 
</div>

jsFiddle : https://jsfiddle.net/azizn/7v0mtfyn/