Как реализовать выезжающий текст?

Question

[Senbonzakuraa]

https://codepen.io/Senbonzakuraa/pen/YxdRQw
Собственно что нужно реализовать:
Изначально текст должен быть скрыт, и при наведении на картинку текст должен выезжать будто бы из под картинки.

Answer 1

[one_day]

Добавьте:

.transform~h1{
margin-left: -900px;
transition: 5s;
}
.transform:hover~h1{
margin-left: 20px;
}

Comments

[Senbonzakuraa]

Спасибо)

Answer 2

[JackShcherbakov]

Как-то так, но для лучшего резульатат через animate() делать. https://codepen.io/CitizenOne/pen/brOQJM

Comments

[Senbonzakuraa]

Вариант хороший, только почему-то не работает когда я даже полностью копирую код. Именно в твоем коде работает, в моем нет - https://codepen.io/Senbonzakuraa/pen/YxdRQw

[Senbonzakuraa]

Senbonzakuraa: отбой, починил)

[JackShcherbakov]

Senbonzakuraa, хах, спасибо! Проблема была в том, что вы библиотеку не подключили?

[Senbonzakuraa]

JackShcherbakov, да) извиняюсь за поздний ответ)