Устранение неполадок анимации css3 div

Question

Я пытаюсь устранить проблему, которая внезапно возникла на моей веб-странице. If you take a look at this livelink вы увидите, что в моей схеме сетки шаг 1, шаг 2, шаг 3, & Шаг 4 divs анимируются для вращения с использованием анимации css3. Однако при добавлении других css и внесении изменений по какой-то причине анимация возится. Предполагается, что div должен вращаться, а затем текст упрощается. Однако их текст отображается за div как div. Он также показывает текст, который находится в div выше! Я понятия не имею, что здесь произошло, но, пожалуйста, мне действительно нужна помощь некоторых людей, так как я не могу обдумать это!

HTML из дивы в вопросе

<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 из дивы в вопросе

.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; 
} 

Однако для более четкого представления о моей проблеме, пожалуйста, просмотреть Livelink и увидеть ошибку в шагах этапа и просмотреть исходный код. Я удалю ожидание ответа на вопрос о будущем потомстве почты.

Answer 1

Я бы изменил общий подход для такого рода анимации. Самый распространенный способ состоит в том, чтобы иметь 2 отдельных divs - переднюю грань и другую для заднего лица.

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

Теперь вы будете листать контейнер и лица

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

Fiddle

Таким образом, вы не будете иметь время на замирание в тексте или какой-либо из этого. :)

Редактировать

И 4 шт сетке - fiddle