title: Nested divs dislocate parent divs
body: <p>I've been trying to add some nested spans to my divs but they keep dislocating the divs that contain them. </p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/4gL9mxjL/" rel="nofollow">http://jsfiddle.net/4gL9mxjL/</a></p>
  
  <p>As you can see, if you hover the mouse over the one of the white div a child div will appear and dislocate its parent. I can't seem to find the reason for this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".port-list").on("mouseenter", ".port-thumbnail", function() {
      $(this).find(".port-title").slideToggle();
    })
  
    $(".port-list").on("mouseleave", ".port-thumbnail", function() {
      $(this).find(".port-title").slideToggle();
    })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.portfolio {
    height: 800px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../static/images/portfolio-background.jpg");
    background-attachment: fixed;
    background-size: cover;
  }
  .portfolio-title {
    top: 100px;
  }
  .port {
    position: relative;
    top: 100px;
    display: inline-block;
  }
  .port-thumbnail {
    height: 150px;
    width: 200px;
    margin: 30px;
    background: #fff;
  }
  .port-list {
    list-style-type: none;
    display: inline;
    padding: 0px;
  }
  .port-area {
    width: 800px;
  }
  .port-title {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    bottom: -130px;
    position: relative;
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="portfolio container-fluid" id="portfolio"&gt;
    &lt;center&gt;
      &lt;div class="intro-title portfolio-title"&gt;
        &lt;strong&gt;My Portfolio.&lt;/strong&gt;
      &lt;/div&gt;
      &lt;div class="port-area"&gt;
        &lt;ul class="port-list"&gt;
          &lt;li class="port"&gt;
            &lt;div class="port-thumbnail"&gt;
              &lt;div class="port-title"&gt;wow&lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="port"&gt;
            &lt;div class="port-thumbnail"&gt;
              &lt;div class="port-title"&gt;wow&lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="port"&gt;
            &lt;div class="port-thumbnail"&gt;
              &lt;div class="port-title"&gt;wow&lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="port"&gt;
            &lt;div class="port-thumbnail"&gt;
              &lt;div class="port-title"&gt;wow&lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="port"&gt;
            &lt;div class="port-thumbnail"&gt;
              &lt;div class="port-title"&gt;wow&lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="port"&gt;
            &lt;div class="port-thumbnail"&gt;
              &lt;div class="port-title"&gt;wow&lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/center&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>