Как с помощью css наложить overflow: hidden на время transition анимации?

Question

[Александр]

Есть блок, при наведение на который мышкой должен блюриться блок внутри него. Но при этом когда на блок не наведена мышка на нём должно быть overflow: visible (так как когда мышка не наведена контент блока может выходить за его границы), а при наведение должно накладываться overflow: hidden так чтобы заблюренный блок внутри него обрезался. Если банально поставить overflow: hidden на hover, то при снятие мышки блюр на какой-то промежуток времени расползается за пределы блока и спадает, что выглядит очень неприятно. Возможно ли решить эту проблему без применения javascript?

Пример:
https://jsfiddle.net/oo8vsrje/

Answer 1

[Alexander Pushkarev]

#Block {
  overflow: hidden;
}

А с ховера убрать

Comments

[Александр]

-_- Перечитай вопрос, не тупи.

[Александр]

"так как когда мышка не наведена контент блока может выходить за его границы"
Когда мышь не наведена на блок и когда анимация закончилась - должно быть overflow: visible;

[Александр]

То есть нужно чтобы overflow: hidden накладывалось так же на тот промежуток, когда пропадает blur, а дальше снималось.

[Александр]

Андрей: что он верно подсказал, лол? Если сделать так, то блок всегда будет обрезаться, а мне нужно чтобы он обрезался только при наведение мыши И ВО ВРЕМЯ УГАСАНИЯ БЛЮРА.

[Александр]

Вот после таких необдуманных ответов потом никто другой на вопрос уже нормально не отвечает, так как думают, что всё так элементарно и ответ уже есть.... Бесит жутко.

[Froggyweb]

Используй keyframe хотя судя по описанию эффект какой-то стремный.