Trying to create an effect where the top 50% of an image shows a different color and text when hovered over, and same for the bottom 50%. Currently, only able to achieve this effect for the lower half of the image. Is there a way to make it work for both halves?
Check out the code on BOOTPLY... BOOTPLY
/* Custom 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 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.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 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.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>