CodePen

HTML

            
              <div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
            
          
!

CSS

            
              .container {
  margin: 1em auto;
  max-width: 800px;
  .box {
    position: relative;
    width: 150px;
    margin: .5em 5px;
    height: 5em;
    background-color: green;
    float: left;
    z-index: 4;
    transition: all .5s;
    &:hover {
      z-index: 10;
      background-color: red;
      width: 200px;
      margin-right: -45px;
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................