A Pen by Christine Moore.

Columns-widen-on-hover.markdown

Columns widen on hover

Columns widen on hover and resize again on mouseout.

A Pen by Christine Moore on CodePen.

License.

index.jade

.column#red
  p Hello there.
.column#orange
  p If you hover
.column#yellow
  p over each section
.column#green
  p a couple of words
.column#blue
  p will appear

script.js

// DOM ready.
$(function () {
	initHoverBoxes();
});

function initHoverBoxes() {
  var $column = $('.column');
  
  $column.mouseenter(function() {
    $column.removeClass('wide');
    $column.css('width', '15%');
    $(this).addClass('wide');
  });
  
  $column.mouseleave(function() {
    $column.css('width', '20%');
    $column.removeClass('wide');
  });
}

style.scss

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

html, body {
  height: 100%;
}

.column {
  width: 20%;
  padding: 2%;
  height: 100%;
  float: left;
  margin: 0;
  transition: all 0.5s ease;
  &.wide {
    width: 40%!important;
  }
  &#red {
    background: #F25648;
  }
  &#orange {
    background: #FC7B16;
  }
  &#yellow {
    background: #FEE532;
  }
  &#green {
    background: #23AF4C;
  }
  &#blue {
    background: #42B4E6;
  }
  &:hover {
    p {
      opacity: 1;
    }
  }
}

p {
  color: #fff;
  text-align: center;
  font-family: Arial, sans-serif;
  font-weight: bold;
  opacity: 0;
  transition: all 0.5s ease;
}