Background image has transition time but position transition does not - html

Question

So I am looking to have a div's (buttons) background image change on hover AND move 20px left and 20px up on hover. Right now when I hover the div the background image changes on a 0.7s transition like I want it to, but the position change does not have the transition time. Any help on this would be awesome
.buttons:hover{
background: transparent;
background-image: url('image2');
right: 20px;
top: -20px;
}
.buttons{
position: relative;
width:95%;
height: 145px;
background-image: url('image1');
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.buttons h3{
position: relative;
top: 50px;
}
.buttoncontainer{
width: 100%;
text-align: center;
}
.buttoncontainer a{
text-decoration: none;
}
<div class="buttoncontainer">
<a href="#">
<div class="buttons">
<h3 style="font-family: helvetica;color:#13506D;">General IP Services <img src="arrow.png" alt="">
</h3>
</div>
</a>
</div>

Answer 1

In order for the animation to work, it needs to transition from something, to your new location. Define top: 0; and right: 0; before the transition.
.buttons:hover{
background: transparent;
background-image: url('image2');
right: 20px;
top: -20px;
}
.buttons{
position: relative;
width:95%;
height: 145px;
right: 0; /* Define right */
top: 0; /* Define top */
background-image: url('image1');
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.buttons h3{
position: relative;
top: 50px;
}
.buttoncontainer{
width: 100%;
text-align: center;
}
.buttoncontainer a{
text-decoration: none;
}
<div class="buttoncontainer">
<a href="#">
<div class="buttons">
<h3 style="font-family: helvetica;color:#13506D;">General IP Services <img src="arrow.png" alt="">
</h3>
</div>
</a>
</div>