Bouncy Columns

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

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Bouncy Columns</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

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

  
</head>

<body>
  <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>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

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

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
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 .column.active {
  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 https://www.codeseek.co/ */
(function() {
  $('.column').hover(function() {
    $(this).addClass('active');
    return $('.column:not(.active)').addClass('nonactive');
  }, function() {
    return $('.column').removeClass('active nonactive');
  });

}).call(this);

This awesome code ( Bouncy Columns ) is write by Chris Tieman, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Chris Tieman