Bouncy Columns

In this example below you will see how to do a Bouncy Columns with some HTML / CSS and Javascript

Columns that expand when hovered over. Good for maybe a portfolio or something?

This awesome code was written by chrisxclash, you can see more from this user in the personal repository.
You can find the original code on
Copyright chrisxclash ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Bouncy Columns</title>
  <script src="" type="text/javascript"></script>

    <link rel="stylesheet" href="">

      <link rel="stylesheet" href="css/style.css">



  <div id='wrap'>
  <div class='column col1'></div>
  <div class='column col2'></div>
  <div class='column col3'></div>
  <div class='column col4'></div>
  <div class='column col5'></div>
  <script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
body {
  background: #442D1A;

#wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
#wrap .column {
  float: left;
  height: 100%;
  width: 20%;
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  -ms-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
#wrap {
  width: 70%;
#wrap .column.nonactive {
  width: 7.5%;
#wrap .col1 {
  background: #321805;
#wrap .col2 {
  background: #9E2013;
#wrap .col3 {
  background: #E5CB95;
#wrap .col4 {
  background: #A2CC64;
#wrap .col5 {
  background: #442D1A;

/*Downloaded from */
(function() {
  $('.column').hover(function() {
    return $('.column:not(.active)').addClass('nonactive');
  }, function() {
    return $('.column').removeClass('active nonactive');


//# sourceURL=coffeescript