JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.johnnyedick.com/styles.css">
<script src="http://www.johnnyedick.com/js/fancyBox.js"></script>
<script src="http://www.johnnyedick.com/js/jquery.fancybox.js"></script>
<div id="bigWrapper">

  <div id="wrapper" class="roundedCorners" >
    <div id="content" class="topImage roundedCorners">
      <div id="recentWork">
        <div id="box1" class="box" alt="box"></div>
        <div id="box2"  class="box" alt="box"></div>
        <div id="box3"  class="box" alt="box"></div>
      </div>
    </div>
  </div>
  <!-- <div id="footerWrapper"></div> --> 
</div>

CSS

#recentWork{
    overflow:hidden;
    background: white;
}

.box{
    width: 100px;    
}

#box1 {
    width: 530px;
    
}

JavaScript

$('.box').on({
    mouseenter: function() {
        var $this = $(this);
        $this.siblings().animate({
            width: 100
        });
        $this.animate({
            width: 530
        });
    }
});