Hover over image top and bottom with different effect
<p>I have an image and I try to make the top 50% show a different colour and text when hover over. And the same for the lower 50% of the height of the image.
I came so far to get the below 50% but its all over the page, not just the image, and the top 50% doesnt show. Is it possible to achieve my goal?</p>

<p>BOOTPLY... <a href="http://www.bootply.com/mDinAZKFKp" rel="nofollow">BOOTPLY</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS used here will be applied after bootstrap.css */

.image img {
    display: block;
}

.thumb-wrap img {
    width: 50%;
    height: auto;
}

.thumb-wrap:hover .thumb-caption {
    opacity: 0.7;
}
.thumb-caption {
    position: absolute;
    left: 0px;
    bottom: 0;
    width: 100%;
    height: 50%;
    background-color: #000;
    margin: 0;
    z-index: 1;
    text-align: center;
  opacity: 0;
-webkit-transition: all, .5s;
-moz-transition: all, .5s;
-o-transition: all, .5s;
-ms-transition: all, .5s;
transition: all, .5s;
}
  
/*.thumb-caption-above {
    position: absolute;
    left: 0px;
    top: 0;
    width: 100%;
    height: 50%;
    background-color:red;
    margin: 0;
    z-index: 0;
    text-align: center;
  opacity: 0;
-webkit-transition: all, .5s;
-moz-transition: all, .5s;
-o-transition: all, .5s;
-ms-transition: all, .5s;
transition: all, .5s;
}*/</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="image"&gt;
                        &lt;div class="thumb-wrap"&gt;
                            &lt;img src="http://placehold.it/550x150"&gt;

                            &lt;h2 class="thumb-caption"&gt;&lt;a href="#"&gt;More info
                             &lt;/a&gt;&lt;/h2&gt;
                          &lt;h2 class="thumb-caption-above"&gt;&lt;a href="#"&gt;See larger
                             &lt;/a&gt;&lt;/h2&gt;
                        &lt;/div&gt;&lt;/div&gt;


            &lt;div id="push"&gt;&lt;/div&gt;
        </code></pre>
</div>
</div>
</p>