How to fade 3 individual div background colors on hover (html, CSS)

I'm trying to imitate (in a simple way) the style of this page: http://www.smoolis.com/screen/pricing/language/en

Essentially, I'm aiming to create three tables with product images on top, where the background color behind each of the three images changes slightly on hover in a fade effect.

I'm able to find quite a lot of examples of images changing, but few with the background color of a div - do you have an example of this working?

My WIP code is available here, though it has two issues: 1) I would like to add three different background-colors behind the 3 images 2) I would ideally not want the images to fade, but rather the background colors 3) I'd like the background colors to fade independently - e.g. now the images fade all at the same time

Any help would be super appreciated!

<style>
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.container {
    position: relative;
    width: 50%;
}
.container:hover .image {
  opacity: 0.8;
}
</style>

<div id="columns">
<div class="one-third">
  <div class="container">
    <img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
    <div class="overlay"></div></div>
<table>
  <tbody><tr>
    <th>Firstname</th>
   </tr>
  <tr>
    <td>Peter</td>
   </tr>
  <tr>
    <td>Lois</td>
   </tr>
  <tr>
    <td>Joe</td>
    </tr>
  <tr>
    <td>Cleveland</td>
     </tr>
</tbody></table>
</div>
<div class="one-third">
  <div class="container">
    <img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
    <div class="overlay"></div></div>
<table>
  <tbody><tr>
    <th>Firstname</th>
   </tr>
  <tr>
    <td>Peter</td>
   </tr>
  <tr>
    <td>Lois</td>
   </tr>
  <tr>
    <td>Joe</td>
    </tr>
  <tr>
    <td>Cleveland</td>
     </tr>
</tbody></table>

</div>
<div class="one-third-last">
  <div class="container">
    <img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
    <div class="overlay"></div></div>
<table>
  <tbody><tr>
    <th>Firstname</th>
   </tr>
  <tr>
    <td>Peter</td>
   </tr>
  <tr>
    <td>Lois</td>
   </tr>
  <tr>
    <td>Joe</td>
    </tr>
  <tr>
    <td>Cleveland</td>
     </tr>
</tbody></table>
</div>
</div>

Solution

To address your three questions:

In their current form background colors cannot be added to these images as they already have a white background. If you would like to adjust the background color of these images you would need to remove the background in a photo editing program.
If you did use images with a transparent background then the following would allow you to fade the background of the images.

.container .image {
  background-color:blue;
  transition:background-color 1s;
}

.container .image:hover {
  background-color:LightBlue;
}

<div class=container>
  <img class="image" src="https://www.drupal.org/files/issues/test-transparent-background.png">
</div>
<div class=container>
<img class="image" src="https://www.drupal.org/files/issues/test-transparent-background.png">
</div>

A simple test of your example code shows that at least in my case, the images do fade separately.

Also, in my example of how you would do this with a transparent image, I put the hover property on the image rather than the container. If you would rather the fading function in the same way as your example, the line can be changed to .container:hover .image.