Как реализовать эффект подсветки при наведении?

Question

[Анастасия Панфилова]

Нужно реализовать такой вот ховер эффект(на пункте "Акции"). Как это сделать? Просто цсс, или может плагин какой-нибудь?

Answer 1

[RTW]

.el:hover{
    background: radial-gradient(ellipse at bottom, #87e0fd 0%,#01262b 55%);
}

Answer 2

[Andrzej Wielski]

Можно с помощью box-shadow над смещенным вниз с помощью margin элемента, скрытого с помощью overflow: hidden

https://jsfiddle.net/gb2qjjky/

Comments

[Анастасия Панфилова]

Спасибо за наглядный пример ) а можно ли сделать так, что бы эта подстветка появлялась плавно? я вроде добавила транзишн, но он не работает (простите холопа за глупые вопросы)

[RTW]

Например, если через box-shadow
https://jsfiddle.net/ttnxosz0/1/

[Анастасия Панфилова]

RTW: Спасибо Вам большое )

Answer 3

[iBird Rose]

box-shadow если правильно применить - получится как на картинке