Как сделать анимацию появление блока?

Question

[offsiderst]

ховер на картинки ( кнопка details)
сейчас полоска правильно анимируется
а ссылка read more как то не так

ubc-build.com.ua/en/our-team

https://jsfiddle.net/ujarvxgf/1/

Comments

[Михаил Р.]

В .team__details добавить свойство:
text-decoration: none;

Вы про это?

[offsiderst]

Mike, нет
по ссылке выше read more плавно снизу вылетает и стает по центру
у меня как то не так

Answer 1

[mikhailivanko]

Потому что стили анимации отличаются от оригинала.
Если опустить детали, то в оригинале анимация кнопки происходит по следующему сценарию:

transform: translateY(100px); -> transform: translateY(0);
opacity: 0 -> opacity: 1;

У вас кнопка (.team__details) анимируется следующим образом:

transform: translate(-50%,  0); -> transform: translate(-50%, -50%);
top: auto; -> top: 50%;
opacity: 1; -> opacity: 1;

Comments

[offsiderst]

mikhailivanko, пробую, но тогда все ломается
https://jsfiddle.net/jknvruc8/

[mikhailivanko]

offsiderst, ломается, потому что изначально код был неверный и замены на мой код выше было конечно недостаточно

Вот рабочий вариант:

[offsiderst]

mikhailivanko, спасибо