CSS Transition/Animation Not Working

Question

I have divs that use a css animation to spin around and have text fade in, these work on mouse hover. The fade in is working however the spin is not working. Below is my code.

 .hover-img { 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: rotateY(180deg); -webkit-transform-style: preserve-3d; text-align: center; font-size: 0; } .hover-img:hover { -webkit-transform: rotateY(0deg); font-size: 14px; color: white; } 

 <div id="container"> <p>ggggggggggggggggggggg</p> <div id="cell1"> <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff</div> <p></p> <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff</div> <p></p> </div> <div id="cell1"> <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff</div> <p></p> <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff</div> <p></p> </div> <div id="cell3"> <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff</div> <p></p> <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff</div> <p></p> </div> </div> 

I also believe as this is a site specific problem it will be helpful to include a livelink. I will remove it as soon as the question is answered for future posterity of this post.

Answer 1

Look at this fiddle: demo
1:
I changed -webkit-transform: rotateY(0deg); to -webkit-transform:rotateY(180deg);
2:
I added transform: rotateY(180deg);
3:
I encapsulated .hover-img with . .trigger so when you hover .trigger it will animate the .hover-img

I tested it in: Firefox (latest), Chrome(latest) IE(latest)