我有一个形象,我尽量让最高的50%显示出不同的颜色和文本时,悬停。对于图像高度的较低50%也是如此。 我来到迄今获得低于50%,但其在整个页面,而不仅仅是图像,并且前50%犯规表演。是否有可能实现我的目标?将鼠标悬停在图片顶部和底部有不同的效果
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>
谢谢,正是我在后。 – raulbaros