JSFiddle - React, Tailwind, and code Playground

HTML

<div id="meet_team">
                <ul>
                    <li><img src="/images/team/alan.jpg" alt="" class="br" /></li>
                    <li><img src="/images/team/barbara.jpg" alt="" class="br" /></li>
                    <li><img src="/images/team/claire.jpg" alt="" class="bl" /></li>
                    <li><img src="/images/team/denise.jpg" alt="" class="bl" /></li>
                    <li><img src="/images/team/whitneyr.jpg" alt="" class="br" /></li>
                    <li><img src="/images/team/greg.jpg" alt="" class="br" /></li>
                    <li><img src="/images/team/eric.jpg" alt="" class="bl" /></li>
                    <li><img src="/images/team/kyle.jpg" alt="" class="bl" /></li>
                    <li><img src="/images/team/jeanette.jpg" alt="" class="br" /></li>
                    <li><img src="/images/team/jim.jpg" alt="" class="br" /></li>
                    <li><img src="/images/team/kathy.jpg" alt="" class="bl" /></li>
                    <li><img src="/images/team/keith.jpg" alt="" class="bl" /></li>
                    <li><img src="/images/team/leanne.jpg" alt="" class="br" /></li>
                    <li><img src="/images/team/mandy.jpg" alt="" class="br" /></li>
                    <li><img src="/images/team/mark.jpg" alt="" class="bl" /></li>
                    <li><img src="/images/team/martha.jpg" alt="" class="bl" /></li>
                    <li><img src="/images/team/matt.jpg" alt="" class="br" /></li>
                    <li><img src="/images/team/may.jpg" alt="" class="br" /></li>
                    <li><img src="/images/team/spencer.jpg" alt="" class="bl" /></li>
                    <li><img src="/images/team/wendyb.jpg" alt="" class="bl" /></li>
                    <li><img src="/images/team/wendym.jpg" alt="" class="br" /></li>
                    <li><img src="/images/team/whitneyk.jpg" alt="" class="br" /></li>
                </ul>
            </div>

CSS

#meet_team {
    width:300px;
    position:relative;
    min-height:550px;
}


#meet_team ul {
    list-style:none;
    padding:0;
    margin:0;
}

#meet_team ul li {
    float:left;
    display:block;
    position:relative;
    width:69px;
    height:80px;
    margin:3px;
}

#meet_team img {
    width:69px;
    height:80px;
    position:absolute;
    top:0;
    left:0;
}

JavaScript

function Team_In() {
        $('#meet_team img').stop(true, true);
        var orig = $(this).attr('src');
        var pos = strpos(orig, '.jpg', 0);
        var root = orig.substr(0, pos);
        thumb = root + '.jpg';
        var full = root + '_b.jpg';
        
        $(this).attr('src', full);
        $(this).css({'z-index' : 5});
        $(this).animate({width: 146,height: 167}, 1000);
    }
    
    function Team_Out() {
        $('#meet_team img').stop(true, true);
        $('#meet_team img').css({width : '69px', 'height' : '80px', 'z-index' : 1});
        $(this).attr('src', thumb);
        $(this).css({'position' : 'absolute', 'width' : '69px', 'height' : '80px'});
    }
    
    $("#meet_team img").hoverIntent( Team_In, Team_Out );