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

Question

[deadshumz]

У меня есть векторное изображение логотипа вк:

Я хочу, чтобы при наведении курсора на этот логотип, логотип отодвигался влево и текст приезжал справа. Как мне это сделать? ( P.s. Нужно чтобы было адаптивно P.s.s. вектор может быть ссылкой чтобы на мобильных устройствах сразу переходить по ссылке.) Должно становиться так:

P.s. синяя обводка - фигма, Не обращайте внимания..

Answer 1

[Artem Pyvovar]

Отцентрируй вектор в блоке(блок шириной добжен быть больше чем вектор+текст)тексту display none при hover display block и transition задай ему, и он будет плавно смещаться.
Есть ещё один вариант.
Выдели текст в блок, блоку width 0 overflow hidden и при ховере меняй на 100% и auto + transition

Comments

[deadshumz]

сейчас попробую..

[deadshumz]

Через второй вариант попробывал не получается, не мог бы скинуть на codepen?

[Artem Pyvovar]

deadshumz, https://codepen.io/artefan/pen/XWKLWVr Да, держи