JSFiddle - React, Tailwind, and code Playground

HTML

<div class="socialmediaBar">
    <a href="mailto:[email protected]"><img src="http://placehold.it/75x75" height="30" width="30"/> </a>  
    <a href="http://www.facebook.com/ross.beitzel" target="_blank"><img src="http://placehold.it/75x75" height="30" width="30" /> </a>
    <a href="http://www.twitter.com/jrossbeitzel" target="_blank"><img src="http://placehold.it/75x75" height="30" width="30" /> </a>  
    <a href="https://vimeo.com/user35376371" target="_blank"><img src="http://placehold.it/75x75" height="30" width="30" /> </a>
    <a href="https://www.linkedin.com/in/jamesrossbeitzel" target="_blank"><img src="http://placehold.it/75x75" height="30" width="30" /> </a>    
</div>

CSS

.socialmediaBar {
    height:65px;
    width: 500px;
    margin: 0 auto;
    margin-top:18px;
    text-align: center;
    border: 1px solid black;
}

.socialmediaBar a {    
    display: inline-block;
    width: 30px;
    height: 100%;
    margin: 0 9px;
    position: relative;
}

.socialmediaBar a img {
    /*transition: height 400ms;*/
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px solid black;
    width: 30px;
    height: 30px;
}

/*
.socialmediaBar a:hover img {
    transition: height 400ms;
    height: 50px;
}
*/

.socialmediaBar a {
    text-decoration: none;
}

JavaScript

$('.socialmediaBar img').mouseenter(function () {
    $(this).stop().animate({
        width: "+=2%",
        height: "+=20%"
    });
});

$('.socialmediaBar img').mouseleave(function () {
    var x = $(this).attr('width'),
        y = $(this).attr('height');
    
    $(this).stop().animate({
        width: x,
        height: y
    });
});