Filter: blur() размывает края при градиентном размытие?

Question

[flexpc]

Копирую карточку с стороннего сайта

Оригинальная карточка

Моя карточка

Проблема в градиентном размытие. По какой-то причине размытие снизу отсутствует, хотя должно быть как в оригинале. Я думаю это происходит из-за того что filter: blur() так же размывает края, а не только тело картинки как мне надо.

Код

.eventimage {
        position: relative;
        overflow: hidden;
        height: 230px; 
    }
    .image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 230px; 
        object-fit: cover;
        object-position: center;
    }
    .blurr {
        filter: blur(20px);
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,           
            transparent 30%,         
            black 70%,                
            black 100%                 
        );
    }
    .eventtext {
        position: absolute;
        z-index: 3; 
        display: flex;
        flex-direction: column;
        left: 14px;
        bottom: 14px;
    }
    .eventtext1 {
        font-family: San Bold;
        color: #7E818A;
        font-size: 11px;  
    }
    .eventtext2 {
        margin-top: 4px;
        font-family: San;
        color: #FAFDFE;
        font-size: 17px;  
    }
    .eventtext3 {
        margin-top: 4px;
        font-family: San;
        color: #7E818A;
        font-size: 13px;  
        letter-spacing: 0.8px;
    }

<div class="eventimage">
                <img class="image" src="event.webp">
                <img class="image blurr" src="event.webp">
                <div class="eventtext">
                    <span class="eventtext1">SPECIAL EVENT</span>
                    <span class="eventtext2">Multiverse Detective Gilt Set</span>
                    <span class="eventtext3">Gilt Set with distinct forms is here!</span>
                </div>
            </div>

Я просто накладываю одну картинку на другую и размываю верхнюю с маской. Как исправить проблему градиента снизу? Скейл не подходит.

Answer 1

[Пума Тайланд]

у blur(20px) такая особенность — он выходит за края элемента, а overflow:hidden на родителе обрезает эти пиксели. Добавь к .blurr transform: scale(1.1); — картинка станет чуть больше контейнера и обрезание не заденет зону размытия.

p.s. -webkit-mask-image нужен для Safari, иначе маска там не работает

Comments

[flexpc]

вроде на ios17.5.1 без -webkit-mask-image так же как и в хроме на компе

[Пума Тайланд]

ага, iOS 15+ уже без префикса — p.s. актуален только для совсем старых Safari