画像とボタンのホバー効果

Question

画像の中央にボタンを置いた画像があります。自分のイメージにマウスを置いて、イメージに不透明度を追加し、自分のボタンの色を変更したいとき私が持っている問題は、私のイメージ上にマウスを置くと、私のボタンにも不必要な不透明感があることです。 z-indexを試しましたが、うまくいきません。

これは私がこれまでにやっていることです：

#asides .aside-map { 
 
    min-height: 20px; 
 
    margin-top: 20px; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
    -moz-transition: .3s ease-in-out; 
 
    -o-transition: .3s ease-in-out; 
 
    -webkit-transition: .3s ease-in-out; 
 
    transition: .3s ease-in-out; 
 
    position:relative; 
 
    width: 100%; 
 
    height: 350px; 
 
    background: url("http://placehold.it/350x150"); 
 
} 
 

 
#asides .aside-map .btn-main.map { 
 
    position: relative; 
 
    top: 50%; 
 
} 
 

 
#asides .aside-map:hover { 
 
    opacity: 0.5; 
 
} 
 

 
#asides .aside-map:hover > .btn-main.map { 
 
    background-color: rgb(254, 204, 0); 
 
    border: 2px solid rgb(254, 204, 0); 
 
    opacity: 1; 
 
}

<div id="asides"> 
 
    <a class="aside-map"> 
 
    <div class="btn btn-main map"> 
 
     <span class="fa fa-map-marker">Show Map</span> 
 
    </div> 
 
    </a> 
 
</div>

を私はスニペットに画像を表示することができないのですが、これはそれがどのように見えるかです：

私が画像上でホバリングしているとき、これは私が持っているものです：

私のイメージとボタンの両方が0.5の不透明度を持っていると私は任意の不透明度なしで私のボタンを持っていると思い

Answer 1

あなたの問題は、素子全体のためにそのopacity: 0.5セットの不透明度です。

代わりbackground: rgba(0, 0, 0, 0.5)を使用することができます。

#asides .aside-map { 
 
     min-height: 20px; 
 
     margin-top: 20px; 
 
     margin-bottom: 10px; 
 
     text-align: center; 
 
     -moz-transition: .3s ease-in-out; 
 
     -o-transition: .3s ease-in-out; 
 
     -webkit-transition: .3s ease-in-out; 
 
     transition: .3s ease-in-out; 
 
     position:relative; 
 
     width: 100%; 
 
     height: 350px; 
 
     background: url("http://placehold.it/350x150"); 
 
    } 
 

 
     #asides .aside-map .btn-main.map { 
 
      position: relative; 
 
      top: 50%; 
 
     } 
 

 
     #asides .aside-map:hover { 
 
      background: rgba(0, 0, 0, 0.5); 
 
     } 
 

 
      #asides .aside-map:hover > .btn-main.map { 
 
       background-color: rgb(254, 204, 0); 
 
       border: 2px solid rgb(254, 204, 0); 
 
       opacity: 1; 
 
      }

<div id="asides"> 
 
    <a class="aside-map"> 
 
    <div class="btn btn-main map"> 
 
     <span class="fa fa-map-marker">Show Map</span> 
 
    </div> 
 
    </a> 
 
</div>