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图像缩放

回答

相关问题