Hello, please specify the error why is not working transitions?

There is such a unit:



nails.png
Nail Studio
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.


There are rules for him :
.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;
}
website tobacco shop.Russia

The question I want when you hover unit with services gradually rose up, but the transitions are not triggered, and the unit jumps dramatically, what actually happens?74f1d65f436a410ba50860a64943fc2f.png
July 9th 19 at 10:10
1 answer
July 9th 19 at 10:12
I suppose that for .service-item need to set the initial value of the property, which is going to change. That is top: 0;
UPD: here's the working example codepen.io/Kublyakov/pen/BzyobP
true. should set the initial value of the property. - Lulu_Zulauf71 commented on July 9th 19 at 10:15

Find more questions by tags CSSHTML