Troubleshooting a css3 div animation

Question

I am trying to troubleshoot a problem that has suddenly developed on my webpage. If you take a look at this livelink you will see that within my grid layout the step 1, step 2, step 3, & step 4 divs are animated to spin using css3 animation. However while adding other css and making changes for some reason the animation is messing up. The div is supposed to spin and then the text eases in. However their is text showing behind the div as the div spins. It is also showing the text that is in the div above! I have no idea what has happened here but please I really need somebodies help as I can not get my head around it!

HTML of the divs in question

<div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/><p>Fill out our order form choosing the service you require and your payment details. We will then take a deposit and book you into our diary.<p></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/><p>We will produce the work you require using the project plan. All of our work is produced Within the time limit set and to the highest possible standard.<p></div>
        </div>
    </div>
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/><p>We will have a face to face meeting to discuss everything that you require and we will put together a project plan.<p></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/><p>A design is not finished until you are entirely happy. When we believe the work is complete we will send you an artwork approval form for you to sign and return.<p></div>
        </div>
    </div>
</div>

CSS of the divs in question

.hover-img, .hover-img.hover_effect {
position: relative;
width: 200px;
height: 200px;
-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-style: preserve-3d;
text-align: center;
font-size: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px;
}

.trigger:hover > .hover-img {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
font-size: 14px;
color: #FFF;
}
.trigger:hover > .hover-img.img4 {
background-color: #f47878;
}
.trigger:hover > .hover-img.img5 {
background-color: #f6c447;
}
.trigger:hover > .hover-img.img6 {
background-color: #92cf96;
}
.trigger:hover > .hover-img.img7 {
background-color: #f47878;
}
.trigger:hover > .hover-img.img12 {
background-color: #92cf96;
}
.trigger:hover .hover-img img {
display: none;
}

However for a clearer idea of my problem please view the livelink and see the error in the step divs and view my source code. I shall remove livelink on answer of question for future posterity of the post.

Answer 1

I'd change the overall approach for this kind of animation. The most common way is to have 2 separate divs - a front face and another for the back face.

<div id="container">
    <div id="card">
      <div class="front face">
        <img src="your_PNG_file_here"/>
      </div>
      <div class="back face">
        <p>Your text goes here.</p>
      </div>
    </div>
</div>

Now you'll be flipping the container of both faces

#container:hover #card {
  transform: rotateY(180deg);
}

Fiddle

This way you won't have to time the fade in of the text or any of that. : )

Edit

And a 4 piece grid - fiddle