A CodePen by Derek P. Collins. Content Slider - On Hover

index.html

<div class="slider">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div><!-- .slider -->

script.js

$('.slider').on( 'mouseover', '.slide', function() {
  $(this).addClass( 'grow' );
  $(this).siblings().addClass( 'shrink' );
}).on( 'mouseout', '.slide', function() {
  $(this).removeClass( 'grow' );
  $(this).siblings().removeClass( 'shrink' );
});

style.scss

@import "compass";
.slider {
  border: 2px solid #222;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 30px auto;
  overflow: hidden;
  width: 541px;
  
  .slide {
    border-left: 2px solid #222;
    height: 200px;
    float: left;
    overflow: hidden;
    -moz-transition: width .4s ease-out;
    -webkit-transition: width .4s ease-out;
    transition: width .4s ease-out;
    width: 106px;
    
    &:first-child {
      border-left: 0;
    }
    &.grow {
      width: 310px;
    }
    &.shrink {
      width: 55px;
    }
  }
}