HTML Jquery Move Image Left And Right On Mouse Hover

I am new to HTML and jquery and I am trying to move a image left and right when a mouse hovers over the image in HTML page. I think this could be done using jquery animate function

Solution 1:

This is an example, there are hundreds of different ways to it.

The CSS way:

#css img {
    left: 0px;
    transition: left .5s;
}
#css:hover img {
    left: 50px;
}

The JavaScript/jQuery way:

$('#js').on('mouseenter', function() {
  $(this).find('img').css('left', '50px');
}).on('mouseleave', function() {
  $(this).find('img').css('left', '0px');
});

Demo

---

Using animations:

JavaScript/jQuery:

$('#js').hover(function () {
    $(this).find('img').animate({
        left: '50px'
    }, 500);
}, function () {
    $(this).find('img').animate({
        left: '0px'
    }, 500);
});

CSS transitions:

img {
    position: relative;
    margin:20px;
    left:0px;
    -webkit-transition: left 500ms;
    -moz-transition: left 500ms;
    -ms-transition: left 500ms;
    -o-transition: left 500ms;
    transition: left 500ms;
}
#css:hover img {
    left:50px;
}

Demo with both animation variants