Hover over image top and bottom with different effect - html

Question

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?
BOOTPLY... BOOTPLY
/* 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;
}*/
<div class="image">
<div class="thumb-wrap">
<img src="http://placehold.it/550x150">
<h2 class="thumb-caption"><a href="#">More info
</a></h2>
<h2 class="thumb-caption-above"><a href="#">See larger
</a></h2>
</div></div>
<div id="push"></div>

Answer 1

Try this:
.thumb-wrap {
width: 550px;
position: relative;
}
.thumb-caption:hover {
opacity: 0.7;
}
/* Default styles for hover block */
.thumb-caption {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50%;
background-color: #000;
margin: 0;
z-index: 1;
text-align: center;
opacity: 0;
transition: all, .5s;
}
/* Alternate positioning and background color */
.thumb-caption.above {
top: 0;
background: red;
}
/* For the text color */
.thumb-caption > a {
color: blue; /* default */
}
.thumb-caption.above > a {
color: yellow; /* alternate */
}
<div class="image">
<div class="thumb-wrap">
<img src="http://placehold.it/550x150">
<h2 class="thumb-caption">More info</h2>
<h2 class="thumb-caption above">See larger</h2>
</div>
</div>
The important part for positioning was adding position: relative on your .thumb-wrap container element. I removed the CSS browser prefixes for brevity, but you could add them back in.

Answer 2

The following example shows up both alternatives (info and zoom) at the same time, with the one immediately on hover highlighted.
* {
font-size:1.05em;
color: white;
font-family: arial;
}
#image {
width:550px;
height:150px;
position:relative;
background: url('http://i.imgur.com/HNj6tRD.jpg');
background-repeat: no-repeat;
background-size:100% 100%;
}
.coverUP {
width: 100%;
height: 50%;
position:absolute;
top:0%;
}
.coverDOWN {
width: 100%;
height: 50%;
position:absolute;
top:50%;
}
.coverUP:hover::after {
background: #cc99ff;
opacity: 0.6;
pointer-events: none;
transition: all, 0.6s;
}
.coverDOWN:hover::before {
background: #cc99ff;
opacity: 0.6;
pointer-events: none;
transition: all, 0.6s;
}
.coverUP:hover::before {
background: purple;
opacity: 0.8;
pointer-events: none;
transition: all, 0.6s;
}
.coverDOWN:hover::after {
background: purple;
opacity: 0.8;
pointer-events: none;
transition: all, 0.6s;
}
.coverUP::after {
content: "\A ZOOM";
white-space: pre;
text-align:center;
width: 100%;
height: 100%;
background: #cc99ff;
position:absolute;
top:100%;
opacity: 0.0;
pointer-events: none;
transition: all, 0.6s;
}
.coverDOWN::before {
content: "\A INFO";
white-space: pre;
text-align:center;
width: 100%;
height: 100%;
background: #cc99ff;
position:absolute;
top:-100%;
opacity: 0.0;
pointer-events: none;
transition: all, 0.6s;
}
.coverUP::before {
content: "\A INFO";
white-space: pre;
text-align:center;
width: 100%;
height: 100%;
background: purple;
position:absolute;
top:0%;
opacity: 0.0;
pointer-events: none;
transition: all, 0.6s;
}
.coverDOWN::after {
content: "\A ZOOM";
white-space: pre;
text-align:center;
width: 100%;
height: 100%;
background: purple;
position:absolute;
top:0%;
opacity: 0.0;
pointer-events: none;
transition: all, 0.6s;
}
<div id="image" alt=image>
<a href="#">
<div class="coverUP"></div>
</a>
<a href="#">
<div class="coverDOWN"></div>
</a>
</div>