我有一张图片,我试图让前 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>
最佳答案
试试这个:
.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"><a href="#">More info</a></h2>
<h2 class="thumb-caption above"><a href="#">See larger</a></h2>
</div>
</div>
定位的重要部分是在您的 .thumb-wrap
容器元素上添加 position: relative
。为简洁起见,我删除了 CSS 浏览器前缀,但您可以重新添加它们。
关于html - 将鼠标悬停在图像顶部和底部具有不同的效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35305126/