Opacity and color change on img hover - html

Question

I have an image that has an ease-in-out opacity effect when I hover over it. I like the transition effect but not the color of the image when I hover over it. I can't figure out to change the color of my images when I hover over them. background-color: #50b948; does nothing. What am I doing wrong? Here is my CSS and HTML below.
#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 & 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

you want to apply the background color of the div that contains the image - rather than the image itself - then when you reduce the opacity of the image the background will show through.
.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;
}
and incidentally - you have too many H1's - semantically you should only have 1 H1 per page (or section) and then the others are H2's eg: page H1 could be "Staff" and then each named below would be H2's or 3's.