JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
$(document).ready(function(){
    $(".banners-anim img").each(function(){
        var hover_width = $(this).width();
        var hover_height = $(this).height();
        var unhover_width = (hover_width - 30);
        $(this).width(unhover_width);
        var unhover_height = $(this).height();
        $(this).closest("li").height(unhover_height);
        var offset = "-" + ((hover_height - unhover_height)/2) + "px";
        $(this).closest("span").css({'position':'absolute', 'left':'0', 'top':'25px', 'width':'100%'});
        $(this).hover(function(){
            $(this).animate({width: hover_width, marginTop: offset}, "fast")
        },function(){
            $(this).animate({width: unhover_width, marginTop: 0}, "fast")
        });
    });
});
</script>
<ul class="banners-anim">
    <li>
        <span><a href="#"><img src="http://l.yimg.com/g/images/logo_home.png.v2" alt="" /></a></span>
    </li>
    <li>
        <span><a href="#"><img src="http://l.yimg.com/g/images/logo_home.png.v2" alt="" /></a></span>
    </li>
    <li>
        <span><a href="#"><img src="http://l.yimg.com/g/images/logo_home.png.v2" alt="" /></a></span>
    </li>
    <li>
        <span><a href="#"><img src="http://l.yimg.com/g/images/logo_home.png.v2" alt="" /></a></span>
    </li>    
    
</ul>

CSS

.banners-anim { list-style: none; text-align: center; margin: -1px 0 -14px; padding: 5px 0 30px; }
    .banners-anim li { position: relative; margin: 0; padding-top: 25px; }
        .banners-anim img { position: relative; display: block; margin: 0 auto; vertical-align: top; }