Как плавно убрать блок со страницы?

Question

[cracker-test]

На странице есть блок, который содержит в себе три вложенных блока. Подскажите, как сделать плавное скрытие верхнего и нижнего блока при наведении на общий блок? использую opacity, но пропадает содержимое блоков, но фактически они остаются на странице и размер общего блока не изменяется. Если использую display: none, то нет плавности

<div class="block">
   <div class="red"></div>
   <div class="green"></div>
   <div class="blue"></div>
</div>

Comments

[Вадим]

https://qna.habr.com/search?q=%D0%BA%D0%B0%D0%BA+%...

Тут ответов, конечно же, не нашлось?

Answer 1

[Антон Антон]

https://jsfiddle.net/2sp1k9L0/28/

Comments

[cracker-test]

Ссылка не открывается выложите код пожалуйста тут

[Тимур Сиразиев]

cracker-test, jsfiddle открой через VPN - загрузится всё

[Антон Антон]

cracker-test, https://codepen.io/FragsterAt/pen/QWadGav

[cracker-test]

Антон Антон, спасибо