將鼠標懸停在圖片頂部和底部有不同的效果

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>

爲POSITI的重要組成部分oning是你.thumb-wrap容器元素上添加position: relative。我刪除了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 { 
 
\t width: 100%; 
 
\t height: 50%; 
 
\t position:absolute; 
 
\t top:0%; 
 
} 
 

 
.coverDOWN { 
 
\t width: 100%; 
 
\t height: 50%; 
 
\t position:absolute; 
 
\t 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; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background: #cc99ff; 
 
\t position:absolute; 
 
\t top:100%; 
 
opacity: 0.0; 
 
pointer-events: none; 
 
transition: all, 0.6s; 
 
} 
 

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

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

 
.coverDOWN::after { 
 
content: "\A ZOOM"; 
 
white-space: pre; 
 
text-align:center; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background: purple; 
 
\t position:absolute; 
 
\t 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>