Как сделать анимацию появления текста выезжающим?

Question

[del993788]

Здравствуйте. Заанимировал пример: https://yadi.sk/i/UFyywYJ6bO3cfA
Как сделать такой hover эффект, чтобы текс выезжал из-за невидимого блока? Такое вообще возможно?
Песочница: https://jsfiddle.net/drkrol/w0ebg7dm/2/

Answer 1

[Maxim Kirshin]

Привет, тебе нужно ограничить высоту блока и задать overflow-y:hidden. Тогда текст будет уезжать в невидимость.

Comments

[del993788]

забыл про overflow Спасибо!

[Maxim Kirshin]

Tahir, да, я это и имел ввиду. спасибо за поправку)

Answer 2

[skuvaWeb]

Держи, надеюсь разберешься
https://jsfiddle.net/5mvaw0zr/12/

Comments

[skuvaWeb]

https://jsfiddle.net/5mvaw0zr/16/
Вот пример с ховером. С таймингами, изингом, и значениями трансформации играйся сам до получения нужного эффекта

Answer 3

[nvdfxx]

<h1><span>Эффект</span></h1>

h1 {
    overflow: hidden;
}

span {
    position: relative;
    transform: translateY(100%);
    transition: .3s;
    display: inline-block;
}

h1:hover span {
    transform: translateY(0);
}