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

user4752928 发表于 Dev

475

我有一张图片，当悬停时，我尝试使前50％的图片显示不同的颜色和文字。对于图像高度的下50％相同。到目前为止，我走到了下面50％的位置，但它遍及整个页面，而不仅仅是图像，而顶部50％的位置没有显示。是否有可能实现我的目标？

引导...引导

/* 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>

定位的重要部分是添加position: relative您的.thumb-wrap容器元素。为了简洁起见，我删除了CSS浏览器前缀，但是您可以重新添加它们。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。