Как сделать анимированный плавный hover?

Question

[vasilseodor]

Есть блок. и есть ховер его при наведении. Как сделать так, чтобы ховер появлялся не сразу при наведении а плавно. Или возможно ли так: чтобы выезжало блок ховерный.
Пробовал добавлять транслитион, но не работает почему-то...
Сама код и картинки

Answer 1

[Александр Фадеев]

С помощью CSS-transitions:
https://jsfiddle.net/AlexFadeev/hfbtwyqo/

Его просто нужно уметь готовить: https://css-tricks.com/almanac/properties/t/transition/
www.w3schools.com/css/css3_transitions.asp

И да, пример у вас ужасный. Даже не стал с ним заморачиваться. Если что-то не получается, надо упрощать задачу, исключая максимально лишний мусор.

Answer 2

[Fedwar]

Играй с opacity в данном случае
jsfiddle.net/zxhh0h8b/4

Comments

[Руслан Абдуллаев]

У вас, кстати, пример нерабочий, как минимум, в FF. Использовать вендорные префиксы, привязанные к одному браузеру (-webkit-transition), не самый верный способ.

[Fedwar]

какой вопрос - такой ответ, с вендорами пусть сам разбирается

Answer 3

[Джон Голт]

https://jsfiddle.net/e22zpu14/
Ну и конечно же префиксы нужно будет впилить.

Comments

[Джон Голт]

SelenIT2: ну префикс для transform и для transition

[Джон Голт]

SelenIT2: спасибо, я в курсе ) к слову после того как начал использовать препроцессоры и компиляторы к ним с автопрефиксером, вообще забыл про гемор с префиксами ;)