将鼠标悬停在图片的顶部和底部，效果不同

Question

我有一张图片，当我将鼠标悬停在上面时，我会尝试让前50％显示不同的颜色和文字。并且对于图像高度的较低50％也是如此。 我到目前为止得到了50％以下，但它在整个页面，而不仅仅是图像，而前50％没有显示。是否有可能实现我的目标？

BOOTPLY ...... BOOTPLY

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

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

Answer 2

以下示例同时显示两个备选方案（信息和缩放），并立即突出显示悬停的那个。

* {
font-size:1.05em;
color: white;
font-family: arial;
}

#image {
width:550px;
height:150px;
position:relative;
background: url('http://i.imgur.com/HNj6tRD.jpg');
background-repeat: no-repeat;
background-size:100% 100%;
}

.coverUP {
	width: 100%;
	height: 50%;
	position:absolute;
	top:0%;
}

.coverDOWN {
	width: 100%;
	height: 50%;
	position:absolute;
	top:50%;
}

.coverUP:hover::after {
background: #cc99ff;
opacity: 0.6;
pointer-events: none;
transition: all, 0.6s;
}

.coverDOWN:hover::before {
background: #cc99ff;
opacity: 0.6;
pointer-events: none;
transition: all, 0.6s;
}

.coverUP:hover::before {
background: purple;
opacity: 0.8;
pointer-events: none;
transition: all, 0.6s;
}

.coverDOWN:hover::after {
background: purple;
opacity: 0.8;
pointer-events: none;
transition: all, 0.6s;
}

.coverUP::after {
content: "\A ZOOM";
white-space: pre;
text-align:center;
	width: 100%;
	height: 100%;
	background: #cc99ff;
	position:absolute;
	top:100%;
opacity: 0.0;
pointer-events: none;
transition: all, 0.6s;
}

.coverDOWN::before {
content: "\A INFO";
white-space: pre;
text-align:center;
	width: 100%;
	height: 100%;
	background: #cc99ff;
	position:absolute;
	top:-100%;
opacity: 0.0;
pointer-events: none;
transition: all, 0.6s;
}

.coverUP::before {
content: "\A INFO";
white-space: pre;
text-align:center;
	width: 100%;
	height: 100%;
	background: purple;
	position:absolute;
	top:0%;
opacity: 0.0;
pointer-events: none;
transition: all, 0.6s;
}

.coverDOWN::after {
content: "\A ZOOM";
white-space: pre;
text-align:center;
	width: 100%;
	height: 100%;
	background: purple;
	position:absolute;
	top:0%;
opacity: 0.0;
pointer-events: none;
transition: all, 0.6s;
}

<div id="image" alt=image>
    <a href="#">
      <div class="coverUP"></div>
    </a>
    <a href="#">
      <div class="coverDOWN"></div>
    </a>
  </div>