Przycinanie zdjęcia rozmytego przez filter:blur

Question

Cześć wszystkim

Mam problem ze zdjęciem a mianowicie chciał bym żeby wybrane zdjęcia na stronie automatycznie się rozmywały dlatego do każdego zdjęcia dodałem klasę i w css do tej klasy dopisałem "filter: blur(Xpx);". Wszystko działa doskonale problem w tym że nie wiem jak pozbyć się tych rozmytych brzegów.

Na zdjęciu doskonale widać jaki efekt chcę uzyskać:

 

Czy idzie jakoś już rozmyte zdjęcie przyciąć ?? 

Answer 1

Wpadł mi na razie jeden pomysł jak to zrobić.

Wsadzić zdjęcie do jakiegoś pojemnika, nadać mu właściwość overflow z wartością hidden oraz display: table, a zdjęcie znajdujące się w pojemniku lekko powiększyć używając transform: scale(1.05)

<div class="some_div">
    <img src="https://s-media-cache-ak0.pinimg.com/236x/d0/36/20/d03620838bd991e21782942c2b3a3401.jpg" alt="" class="some_img"/>
</div>

.some_div{
    display: table;
    overflow: hidden;
}
.some_img{
    filter: blur(5px);
    transform: scale(1.05);
}

EDIT:

Albo użyć clip: rect();

Comments

Hmm na to bym nie wpadł. Wszystko działa jak należy.

Ogromne dzięki za pomoc dobry człowieku

 

EDIT:

Próbowałem clip: rect(); z samego początku ale coś mi nie szło .

---

Próbowałem clip: rect(); z samego początku ale coś mi nie szło .

Do clip: rect trzeba dodac jeszcze pozycjonowanie absolutne.

---

Do tego doszedłem też ale nie mogę pojąć jak przeglądarka rozumie wartości z css. Np mam zdjęcie szerokie na 450px i wysokie 350px i chciał bym uciąć z każdego boku np. z 10px.