Выезжающая картинка, как реализовать?

Question

[Денис]

Хочу сделать такой эффект как на этом сайте чтоб картинка выезжала по ховеру, такое возможно без JS реализовать?

Comments

[Евгений]

она точно выезжает?

[posters]

Там же не яваскрипт. Простой CSS. В сторону свойства transition смотри в коде страницы.

[posters]

Вот. Я тут на днях что-то похожее с translition реализовывал.
Как поправить анимацию при наведении?
Принцип тот же.

Answer 1

[OMGwp]

Данынй блок просто сделан через position: fixed; Сдвинут вправо через right: -220px;
А при ховере обнуляем right: 0; И чтобы плавно - transition: all 0.3s ease-out;

Answer 2

[Programmir]

Выше уже написали. Старайся сам разбирать код. Наводишь на элемент, получаешь код и видишь, что у блока position:fixed и right:-220px. В гугл хром можно поставить галочку на :hover, и ты увидишь, что у блока уже right:0 и transition: all 0.3s ease-out;