Здравствуйте, укажите на ошибку, почему не работает транзишн?

Question

[hujak_hujak]

Есть такой блок:




Ногтевая студия
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.


Есть правила для него :
.service-item {
position: relative;
height: 400px;
width: 22%;
margin: 0 2%;
text-align: center;
box-shadow: 0 1px 1px 0 #848484 ;
transition: all 350ms ease-in-out 0s;
-moz-transition: all 350ms ease-in-out 0s;
-webkit-transition: all 350ms ease-in-out 0s;
-o-transition: all 350ms ease-in-out 0s;
&:hover{
top:-10px;
}
сайт табачная-лавочка.рф

Вопрос, я хочу чтобы при наведении курсора блок с услугами плавно поднимался вверх, но транзишн не срабатывает, и блок прыгает резко, что собственно происходит?

Answer 1

[Кирилл]

Предположу, что для .service-item нужно задать первоначальное значение свойства, которое собираетесь менять. То есть top: 0;
UPD: вот работающий пример codepen.io/Kublyakov/pen/BzyobP

Comments

[Сергей delphinpro]

верно. стоит задавать начальное значение свойства.