CSS3 Transition spinning div with background image change

Question

This codepen link is the code that my code below is based on. Here is the code

What I am trying to do is tweak my code so when the animated div spins around, a background image that I am using changes to a background colour. The code uses 5 css3 transitions and my code can also be found below.

MY CSS

.column {
display: inline-block;
vertical-align: top;
width: 400px;
}

.row {
font-size: 0;
}

.row2 .column {
width: 600px;
}

.row2 .column .hover-img {
height: 400px;
line-height: 400px;
}

.row2 .column .hover-img:hover {
font-size: 28px;
}

.img1 {
background: url(topright.png);
}

.img2 {
background: url(topcenter.png);
}

.img3 {
background: url(topleft.png);
}

.img4 {
background: url(bottomleft.png);
}

.img5 {
background: url(bottomright.png);
}


body {
font-family: Arial, sans-serif;
}

#apDiv7 {
width: 1200px;
background-color: #FFFFFF;
border-radius: 20px;
border: 8px solid #666666;
}

.hover-img {
position: relative;
height: 300px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
margin: 0 auto;
line-height: 300px;
}
.column:hover .hover-img{
-webkit-transform:rotateY(0deg);
font-size:18px;
color:white;
}

MY HTML

<div id="apDiv7">
<div style="border-radius: 20px;" class="table-wrapper">
<div class="row row1">
  <div class="column">
    <div class="hover-img img1">
      text here 1
    </div>
  </div>
  <div class="column">
    <div class="hover-img img2">
      text here 2
    </div>
  </div>
  <div class="column">
    <div class="hover-img img3">
      text here 3
    </div>
  </div>
</div>
<div class="row row2">
  <div class="column">
    <div class="hover-img img4">
      text here 4
    </div>
  </div>
  <div class="column">
    <div class="hover-img img5">
      text here 5
    </div>
  </div>
</div>
</div>
</div>

Answer 1

I guess you should have to add an :hover for each of the img classes.

Example:

.img:hover{
    background: red;
}