Как сделать чтобы картинки двигались?

Question

[Alexandr Lebedev]

Подскажите пожалуйста как сделать чтобы картинки поднимались вверх и опускались вниз? (При наведении)
Вот сайт:contentsia.com

Answer 1

[Lumore]

codepen.io/anon/pen/oXRyzx

Comments

[Alexandr Lebedev]

Cпасибо.

Answer 2

[Денис Инешин]

Вот так что-ли? jsfiddle.net/jajgzy4u

Comments

[Lumore]

Много лишнего кода

[Денис Инешин]

Lumore: Например какого?

[Lumore]

-webkit-transition: all 200ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
    -moz-transition: all 200ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
    -o-transition: all 200ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
    transition: all 200ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
    
    -webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
    -moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
    -o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
    transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);

[Lumore]

Денис Инешин: сравните: codepen.io/anon/pen/oXRyzx

[Денис Инешин]

Lumore: и что вас смутило? Это не линейная анимация, как вы реализуете easing меньшим объемом кода?

[Денис Инешин]

Lumore: + емнип, сегодня в этом коде можно уже выкинуть строки с префиксами -moz- и -o-

[Lumore]

Денис Инешин: они у вас тоже присутствуют, я их использую для пользователей, которые не обновили браузеры. (таких не мало)

Answer 3

[Виталий Инчин ☢]

.two_fourth_last img{
   transition: transform 0.5s;
}
.two_fourth_last img:hover{
  transform: translateY(-50px);
}