如何讓我的圖像水平顯示，並且都有覆蓋圖？

Question

這是我到目前爲止已經試過：

HTML：

<div class="container"> 
    <a href="Game%20Page.htm" title="Game Page"> 

    <img src="Images/green-circle-hi.png" alt="Green" class="image 1" style="width: 400px": height="400px"></a> 
    <div class="overlay"> 
    </div> 

    <img src="Images/amber-clipart-face-15.png" alt="Amber" class="image 2" style="width: 400px": height="400px"> 
    <div class="AmberOverlay"> 
    </div> 
</div> 

CSS：

.container { 
    position: relative; 
    width: 28%; 
} 

.overlay { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
    opacity: 0; 
    transition: .5s ease; 
    background-image: url(Images/Green%20circle%20Overlay.jpg); 
    background-size: cover; 
    border-radius: 50%; 
} 
.container:hover .overlay { 
    opacity: 1; 
} 

.container { 
    position:absolute; 
    width: 28%; 
} 

.AmberOverlay { 
    position:absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
    opacity: 0; 
    transition: .5s ease; 
    background-image: url(Images/Green%20circle%20Overlay.jpg); 
    background-size: cover; 
    border-radius: 50%; 
} 
.Amber:hover .AmberOverlay { 
    opacity: 1; 
} 

我想要得到的圖像在同一水平線上，並有一個單獨的覆蓋他們所有人，我如何更改或添加到此代碼，使之發生？

Answer 1

您需要將每個圖像疊加對包裝在一個div中，並將該div設爲position: relative，覆蓋圖然後是position: absolute，並且可以將其拉伸到圖像設置的父代大小。

<div class="box"> 
    <img src="Images/green-circle-hi.png" alt="Green" class="image 1" style="width: 400px": height="400px"></a> 
    <div class="overlay"></div> 
</div> 

<div class="box"> 
    <img src="Images/amber-clipart-face-15.png" alt="Amber" class="image 2" style="width: 400px": height="400px"> 
    <div class="AmberOverlay"></div> 
</div> 

在你的CSS：

.box { 
    postion: realtive; 
} 

.overlay, .AmberOverlay { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

我的jsfiddle創建了一個例子，所以你可以看到結果：https://jsfiddle.net/hpkc04kn/。