title: center content over image on hover
body: <p>I have an image gallery. I want to display a piece of content (# of likes the photo has on instagram)in the center of the image when the image is hovered over. This content and the image are siblings under the same parent element, so I'm trying to use position: relative; and bottom: 50%; on the content. The result is that the content (class of p.likes) does not move up 50% of it's parent element. Why is this not working? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.photo-box {
      width: 100%;
      display: inline-block;
      margin: 0 0 .75em;
      background-color: lightgrey;
      /*border: 1px solid pink;*/
  }
  
  .photo-box .image-wrap {
      width: 100%;
      height: auto;
      max-height: 100%;
      padding: none;
      background-color: lightgrey;
      /*border: 1px solid red;*/
  }
  
  .image-wrap img {
      width: 100%;
      display: inline-block;
      margin-bottom: 0px;
      padding: none;
  }
  
  .image-wrap:hover img {
      opacity: .8;
  }
  
  .image-wrap a {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: none;
  }
  
  p.likes {
      width: 100%;
      visibility: hidden;
      position: relative;
      bottom: 50%;
      text-align: center;
      font-family: 'Open Sans', sans-serif;
      color: #fff;
      /*border: 1px solid red;*/
  }
  
  .photo-box:hover p.likes {
      visibility: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="photo-box"&gt;
      &lt;div class="image-wrap wow fadeIn"&gt;
          &lt;a href="{{link}}" target="_blank"&gt;
              &lt;img src="{{image}}"&gt;
          &lt;/a&gt;
          &lt;p class="likes"&gt;&lt;i class="fa fa-heart" aria-hidden="true"&gt;&lt;/i&gt; {{likes}}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      </code></pre>
  </div>
  </div>
  </p>