imgのホバーでの不透明度と色の変化

Question

私は、その上にマウスを置くと、イージーインアウトの不透明効果のある画像を持っています。トランジションエフェクトが好きですが、画像の上にカーソルを置いたときの画像の色は変わりません。私はそれらの上にマウスを置いたときに私の画像の色を変更することを知ることができません。 background-color: #50b948;は何もしません。私は間違って何をしていますか？以下は私のCSSとHTMLです。いうよりも、画像自体 - - あなたがイメージが含まれているのdivの背景色を適用する

#about img { 
    margin: 0 auto; 
} 

.imgAbout img { 
    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; 
} 

HTML

<div class="row"> 
    <div class="col-md-4"> 
     <a href="bios/teamBioNeil.html"> 
     <div class="imgAbout"> 
      <img src="img/team/neil580x410.jpg" class="img-responsive" alt="Bio"> 
     </div> 
     </a> 
     <h1>NAME</h1> 
     <h3>Chairman &amp; CEO<br> 
        Senior Wealth Advisor</h3> 
    </div> 
    <div class="col-md-4"> 
     <a href="bios/teamBioJeff.html"> 
     <div class="imgAbout"> 
      <img src="img/team/neil580x410.jpg" class="img-responsive" alt="Bio"> 
     </div> 
     </a> 
     <h1>NAME</h1> 
     <h3>President<br> 
     Senior Wealth Advisor</h3> 
    </div> 
    <div class="col-md-4"> 
     <a href="bios/teamBioKim.html"> 
     <div class="imgAbout"> 
      <img src="img/team/kim580x410.jpg" class="img-responsive" alt="Bio"> 
     </div> 
     </a> 
     <h1>NAME</h1> 
     <h3>Chief Operating Officer</h3> 
    </div> 
    </div> <!-- end row --> 

Answer 1

あなたは画像の不透明度を下げるときに背景が透けて見えます。ページのH1「スタッフ」可能性があり、その後、それぞれ下記のだろうという名前：

.imgAbout{ 
    background: #50b948; 
} 

.imgAbout img { 
    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 { 
    opacity: 0.6; 
} 

と偶然には - 意味的にあなただけのページ（またはセクション）ごとに1つのH1を持っている必要があり、その後、他の人は、H2の例である - あなたはあまりにも多くのH1の持っていますH2または3である。