html - 将鼠标悬停在图像顶部和底部具有不同的效果

Question

我有一张图片，我试图让前 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>
        

Answer 1

试试这个:

.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 浏览器前缀，但您可以重新添加它们。