將另一幅圖像放在另一幅圖像的前面

Question

我仔細地定位了一幅圖像。我想在它後面添加另一個圖像，這樣，當我將鼠標懸停在原始圖像上時，不透明度會降低，從而顯示新圖像。但由於某種原因，新圖像位於原始圖像下方。我怎樣才能將它放在原始圖像的後面？

.vid-content-vids { 
 
    float: left; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: .5%; 
 
    padding-bottom: 25px; 
 
} 
 
.vid-content-vids img { 
 
    position: relative; 
 
    left: 18%; 
 
} 
 
.vid-content-vids img.videos-hover { 
 
    position: relative; 
 
    top: 0px; 
 
    left: 18%; 
 
} 
 
.vid-content-vids h1 { 
 
    font-family: Arial; 
 
    font-weight: bolder; 
 
    font-size: 15px; 
 
    word-wrap: break-all; 
 
    width: 200px; 
 
    margin-left: 10%; 
 
} 
 
img.videos:hover { 
 
    opacity: 0.4 
 
}

<div class="vid-content-vids"> 
 
    <a href="#"><img src="http://lorempixel.com/150/150/abstract/1/" class="videos" style="height:150px; width:150px;"></a> 
 
    <a href="#"><img src="http://lorempixel.com/150/150/abstract/2/" class="videos-hover" style="height:150px; width:150px; margin: 0px;"></a> 
 
    <a href="#"><h1 style="margin-left: 10%;">Carlton is called a sellout</h1></a> 
 
</div>

Answer 1

使用相對定位的容器內的絕對定位。給底部圖像一個-1 z-索引。

.vid-content-vids { 
 
    position: relative; 
 
} 
 
.videos, 
 
.videos-hover { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.videos-hover { 
 
    z-index: -1; 
 
} 
 
.videos:hover { 
 
    opacity: 0.4; 
 
    cursor: pointer; 
 
}

<div class="vid-content-vids"> 
 
    <img src="http://lorempixel.com/150/150/abstract/1/" class="videos" style="height:150px; width:150px;"> 
 
    <img src="http://lorempixel.com/150/150/abstract/2/" class="videos-hover" style="height:150px; width:150px; margin: 0px;"> 
 

 

 
</div>