HTML/CSS 圖片縮放

Question

我正在開發我自己的網站，但我遇到了一個問題。

我有一個主頁，其中有 3 個圖像，最初是透明的。 當我將鼠標放在其中一個上時，所選的鼠標將自行縮放並變得完全可見（不透明度為 1.0，比例為 1.10）。 在縮放時，所選圖像會被下一個圖像覆蓋（我認為這是因為它們在代碼中的位置......）。 所以：我不想調整它們的大小，因為它們的大小是正確的； 我只想知道是否可以縮小（縮小？對不起，我不知道正確的詞）未選擇的圖像，而選擇的圖像被放大（我使用事件“懸停”來放大圖像）。 是否可以“連接”許多事件？

這是代碼：

 img {
        
            opacity: 0.5;
        
        }
        
        img:hover {
        
            -webkit-transform:scale(1.10);
            opacity: 1.0;
            
        }

        <div id="slider" class="nivoSlider">
            <center>

             <a href="link" style="color:black; hover:black;"><img src="im1.jpg" alt="" border="5"/></a>
             <a href="link" style="color:black; hover:black;" target="_blank"><img src="img2.jpg" alt="" border="5" style="background-color:white;"/></a>
             <a href="link" style="color:black; hover:black;"><img src="img3.jpg" alt="" border="5" height="168px"/></a>

            </center>
        
        </div>

Answer 1

您可以通過更改活動圖像的 z-index 來在沒有 javascript 的情況下執行此操作。 基本上將懸停的圖像移到前面：

.img{
    position: relative;
    z-index: 1;
}
.img:hover{
    z-index: 2;
}

這是它的代碼筆https://codepen.io/anon/pen/GMrZwj