title: Responsive sticky footer menu hover effect
body: <p>how can I create menu like on the picture? <img src="https://i.stack.imgur.com/zDd5x.png" alt="Image of footer menu"></p>
  
  <p><strong>Requirements:</strong></p>
  
  <ul>
  <li>Built using Bootstrap columns, <strong>must be responsive</strong></li>
  <li>In <strong>normal state</strong>, only Option and icon (green square) can be seen</li>
  <li><strong>OnHover</strong>: The Suboption (in blue rectangle) expands pushing Option up and also Caption in red rectangle appears, also pushing the whole Option up.</li>
  <li>When one Menu item is hovered, <strong>all the others must stay down, not moving</strong></li>
  <li>Expanding with animation</li>
  </ul>
  
  <p><strong>Here's my fiddle attempt:</strong> <a href="http://jsfiddle.net/52VtD/7878/" rel="nofollow noreferrer">http://jsfiddle.net/52VtD/7878/</a></p>
  
  <p>HTML of one item (all are wrapped in a row):</p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-3 nopadding item"&gt;
          &lt;div class="mask"&gt;  
              &lt;div class="inner-wrapper"&gt;
                  &lt;p&gt;Option A&lt;/p&gt;
                  &lt;div class="hidding-guy"&gt;
                      &lt;p&gt;Hello&lt;/p&gt;
                      &lt;a href="#"&gt;Suboption&lt;/a&gt;
                      &lt;a href="#"&gt;Suboption&lt;/a&gt;
                      &lt;a href="#"&gt;Suboption&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;i class="origami o-01"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div class="btn-red "&gt;CAPTION&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.nopadding {
     padding: 0 !important;
     margin: 0 !important;
  }
  
  .footer-menu-wrapper {
    background: #ddd;
    position: fixed;
    bottom: 0;
    width: 100%;
      margin: 0;
  }
  .footer-menu-wrapper .item {
    position: relative;
  }
  .footer-menu-wrapper .item:hover .hidding-guy, .footer-menu-wrapper .item:hover .hidding-guy &gt; * {
    height: auto;
  }
  .footer-menu-wrapper .mask {
    border: 1px solid #ccc;
    width: 100%;
  }
  .footer-menu-wrapper .mask .hidding-guy {
    height: 0px;
  }
  .footer-menu-wrapper .mask .hidding-guy &gt; * {
    display: block;
    height: 0px;
  }
  
  .btn-red {
    background: #e91333;
    color: #fff;
    width: 100%;
    min-height: 66px;
    border: 0px transparent;
    text-align: center;
  }
  </code></pre>