CSS - On hover moving image littlebit left, if not hovered then back to original position

Question

I've been trying doing it, but it doesn't work. It should move that image left 10px, but it doesn't. That div has left css inside it, I think it's because of that. I tried !important, but it didn't work.

Here's JSFiddle: https://jsfiddle.net/jwbvxhv0/1/

$(".seen").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("animated")  
})

$(".seen").hover(function(){
  $(this).addClass("animated");        
})

---

@-webkit-keyframes example {
  0% {
    left: 0px;
  }
  25% {
    left: 10px ! important;
  }
  100% {
    left: 0px;
  }
}

.seen.animated {
  position: relative;
  -webkit-animation-name: example;
  -webkit-animation-duration: 2s;
}

Answer 1

You can use translate transform for left/right movement as it does not affect any neighbour elements' position. To make the transition smooth, you need to add transition on transform property for your image.

Update: If you have a button next to the img, which has higher z-index as you mentioned. You need to apply the same effect to a parent element that contains both - that image and that button.

.moving-left
{
  height: 100px;
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(0px);
  width: 100px;
}
.moving-left:hover
{
 transform: translateX(10px);
}

.moving-left button
{
  left: 8px;
  position: absolute;
  top: 30px;
  z-index: 99;
}

<div class="moving-left">
  <img src="http://placehold.it/100X100" alt="" />
  <button>Button here</button>
</div><!--.moving-left-->