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>
