Как делать такой hover:эффект?

Question

[Илья Пирожок]

На этой страничке в секции My Works при наведении есть интересный эффект. Как его реализовать?
И сразу вопрос на засыпку. На мелкоэкранной версии Тостер меню прячется слева за экран а при нажатии выезжая толкает весь контент вправо. Как это сделано? Почему контент не падает вниз?
Спасибо
Ссылка scripteden.com/previews/Clean

Comments

[Владимир Сергеевич]

Ссылочка отсутствует

Answer 1

[Ирек Ситдиков]

На твои вопросы может легко ответить твой же браузер. Стоит лишь нажать F12, в случае Google Chrome. Найти нужный элемент, в первом случае применить hover эффект, а во втором нажать на нужную кнопку.

Comments

[Илья Пирожок]

А в том то и дело что не видно как сделано)

[Ирек Ситдиков]

Илья Пирожок: почему же? Я вот вижу.
1. https://pp.vk.me/c633530/v633530714/120c2/jhCMWEu7...

Линии реализованы с помощью псевдо-элемента before, который изначально имеет стили transform: scale(0,1) и opacity: 0, а при наведении на figure становится непрозрачным и увеличивается плавно благодаря transition.

[Илья Пирожок]

Ирек Ситдиков: Благодарю. Буду разбираться