user3786102 user3786102 - 4 months ago 13
HTML Question

Opacity and color change on img hover

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 &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

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.