HTML/CSS画像ズーム

Question

私は自分のウェブサイトを楽しく開発していますが、問題があります。 私は3つの画像を持っているホームページを持っています、最初は透明です。私がそれらのうちの1つにマウスを置くと、選択されたものがズームして完全に表示されます（1.0の不透明度と1.10のスケール）。 zoommedになっている間に、選択された画像は次の画像で少し覆われています（コード内での位置付けのためだと思います...）。だから、私は彼らのサイズに合っているので、サイズを変更したくない。私はちょうどズームアウトすることが可能かどうかを知りたい（申し訳ありませんが、私は正しい言葉を知らない）選択されていない画像を選択したが、私はズーム "画像）。多くのイベントを「連結」することは可能ですか？ありがとう、おやすみなさい。 コードは次のとおりです。

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インデックスを変更してJavaScriptせずにこれを行うことができます。基本的には、前面にホバーイメージを移動します。ここでは

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

はhttps://codepen.io/anon/pen/GMrZwj