Как сверстать такой эффект при наведении :hover?

Question

[Alli03]

Приветствую. Подскажите пожалуйста какими способами верстают такие эффекты при наведении на пункт меню? ТЫК Чтобы background менялся при наведении на пункт меню плавно с низу в верх или наоборот?

Answer 1

[WQP]

Держите codepen.io/Glaswr/pen/EZRvom

Answer 2

[Алексей Бурлака]

Внутри элемента ссылки :after с position:absolute; height: 0%; bottom: 0;
Чтобы была плавность — transition

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;

При наведении на ссылку
a:hover :after { height: 100%; }

Answer 3

[Ankhena]

Если у вас уже есть работающий пример, то открывается консоль в браузере и в ней все написано как это сделано.

В данном случае с помощью псевдоэлемента after

Другой, более простой вариант: это изменение высоты при наведении.
https://jsfiddle.net/mdtbyus6/
Я сделала для li.
Чтобы кликабелен был весь блок, нужно задать 100% высоты для ссылки и снова расположить текст по центру.

Answer 4

[Dark Hole]

https://jsfiddle.net/DarkHole/u9f9t5qg/1/