ホバー上でimgに不透明度を適用する

Question

私が上にマウスを置いたときに不透明度をイメージに適用しようとしています。私が.imgAbout imgクラスにそれを適用すると、不透明度も遷移も機能しません。私がそれを動作させるためにどこで不透明度を適用できるかわからない。私が間違ってやっていることがありますか？ここに私のCSSとHTMLがあります。 https://codepen.io/anon/pen/PzQPba 私は私を聞かせてください、それはあなたが探しているものを願っています、そうでない場合：私は可能な解決策を示すためにペンを作った

HTML

<div class="row"> 
    <div class="col-md-4"> 
     <div class="imgAbout"> 
     <img src="img/team/830x593.jpg" class="img-responsive" alt="Bio"> 

     <div class="center-container"> 
      <a class="btn btn-sm btn-primary" href="bios/teamBio.html">View More</a> 
     </div> 
     </div> 

     <h1>First Name Last Name</h1> 
     <h3>Chairman &amp; CEO<br> 
     Senior Wealth Advisor</h3> 
    </div> <!-- end col-md-4 --> 
</div> 

CSS

#about img { 
    margin: 0 auto; 
} 

.imgAbout { 
    position: relative; 
} 

.imgAbout img { 
    display: block; 
    height: auto; 

    opacity: 1; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 

.imgAbout img:hover { 
    background: #50b948; 
    opacity: 0.6; 
} 

.center-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.imgAbout .center-container .btn { 
    visibility: hidden; 
    opacity: 0; 

    -webkit-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out; 
    -moz-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out; 
    -ms-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out; 
    -o-transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out; 
    transition: visibility 0.2s ease-in-out,opacity 0.2s ease-in-out; 
} 

.imgAbout:hover .center-container .btn { 
    visibility: visible; 
    opacity: 1; 
} 

Answer 1

知っている。

親のdivが表示されているときに画像を選択したいので、.parentDiv:hover imgにする必要があります。次に、CSSプロパティを指定することができます。

.imgAbout:hover img { background: #50b948; opacity: 0.6; }