Animate image on mouseover using jQuery

You have seen on many blogs for social media sharing icon where you take mouse over on the icon, the icon jumps up. See below picture for more details.
In this post, I will show you how you can achieve the same thing using jQuery. For the demo, I have placed all the social media icon within a div and I have also set the opacity of the image to 0.5 on document.ready. What we need to do is that on mouseover, adjust the top position of the image and on mouseout reset the top position.
    $("#divSocial a img").css({ opacity: 0.5 });
     $("#divSocial a img").hover(
       function () {
            $(this).animate({ top: "-15" });
            $(this).css({ opacity: 1 });
       function () {
            $(this).animate({ top: "0" });
            $(this).css({ opacity: 0.5 });
Don't forget to set the relative position of the div, otherwise changing the top attribute value will not work.
#divSocial a img
    position: relative;
See live Demo and Code.
Feel free to contact me for any help related to jQuery, I will gladly help you.

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..