HTML/CSS圖像縮放

我正在開發自己的網站以獲得樂趣，並且遇到問題。我有一個主頁，我有3個圖像，最初透明。當我將鼠標放在其中一個上時，所選的一個會自動縮放並變得完全可見（1.0不透明度和1.10比例）。在變焦時，選擇的圖像會被下一個圖像覆蓋（我認爲這是因爲它們在代碼中的位置...）。所以：我不想調整它們，因爲它們尺寸合適。我只想知道是否可以縮小（縮小？對不起，我不知道正確的單詞）未選擇的圖像，而選擇的圖像縮放（我使用事件「懸停」來縮放圖像）。是否有可能「連接」許多事件？謝謝，晚上好。這是代碼。HTML/CSS圖像縮放

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>

來源

2017-09-25 Danilo Moro

請註明您有此代碼，所以我們可以提供幫助。 – FluffyKitten

你可以使用javascript來改變剩餘的圖片，但是像上面提到的@FluffyKitten，沒有代碼就很難提供幫助。 – jfeferman

你可以通過改變活動圖像的z-index的做這沒有JavaScript的。基本上懸停圖像移動到前面：

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

這裏是一個codepen它https://codepen.io/anon/pen/GMrZwj

來源

2017-09-25 16:34:48

謝謝！這就是我需要的。謝謝大家，祝你有美好的一天:) –

@DaniloMoro如果這回答了你的問題，你應該考慮接受它，以便它被標記爲在網站上解決。請參閱[當某人回答我的問題時該怎麼辦？]（https://stackoverflow.com/help/someone-answers） – FluffyKitten

HTML/CSS圖像縮放

回答

相關問題