使用变换旋转和缩放的悬停效果的z索引问题

Question

I have what i believe to be a z-index issue with my rotate and scale hover effect.

Fiddle here

when hovering over the image it flips and scales up and shows the back side of the image with details etc.

The trouble is the images are all in rows and the margin between them is quite small. so when they scale they need to overlap on top of the images either side. at the moment this overlapping is fine to the left and to the top but overlapping is underneath on the images to the right and below.. really strange!

Here is my code - Html

<div id="games-container">  

    <div class="flip-container game">
            <div class="flipper">
                <a href="#">
                    <div class="front">
                      <h1>Front</h1>
                    </div>
                    <div class="back">
                            <span class="game-title">
                                <h3>BACK</h3>
                                <span class="mob-icon"></span>
                            </span>

                            <button class="button green"><a href="#">Play Now</a></button>
                            <button class="blue button"><a href="#">More Info</a></button>
                    </div>

                </a>
            </div>
    </div>


<div class="flip-container game">
            <div class="flipper">
                <a href="#">
                    <div class="front">
                      <h1>Front</h1>
                    </div>
                    <div class="back">
                            <span class="game-title">
                                <h3>BACK</h3>
                                <span class="mob-icon"></span>
                            </span>

                            <button class="button green"><a href="#">Play Now</a></button>
                            <button class="blue button"><a href="#">More Info</a></button>
                    </div>

                </a>
            </div>
    </div>


<div class="flip-container game">
            <div class="flipper">
                <a href="#">
                    <div class="front">
                      <h1>Front</h1>
                    </div>
                    <div class="back">
                            <span class="game-title">
                                <h3>BACK</h3>
                                <span class="mob-icon"></span>
                            </span>

                            <button class="button green"><a href="#">Play Now</a></button>
                            <button class="blue button"><a href="#">More Info</a></button>
                    </div>

                </a>
            </div>
    </div>

CSS -

    /* make things pretty */
#games-container{
    width:800px;
  margin:0 auto;
}
#games-container div.game{
  margin: 0 8px 15px;
  float: left;
    position: relative;
    z-index: 1;
}
#main-container div.inner-container div.game .front img, #main-container div.inner-container div.game .back img{
    width:185px;
  height: 145px;
}
span.game-title {
    background-color:rgba(25,25,25,0.6);
    display: block;
    position: absolute;
    width: 100%;
    top: 0px;
    margin-bottom: 25px;
    text-align: center;
    z-index: 1;
}
span.game-title h3 {
    padding: 5px;
}
.game h3, .game:hover span.game-title{
      color:silver;
      transition:all 0.2s ease-in;
      -webkit-transition:all 0.2s ease-in;
}
.game:hover h3, .game:hover span.game-title{
      color:#fff;
      background-color: #0c0c0c;
}
.game a{
    display: block;
}

.back > .button{
    position: relative;
    z-index: 1;
}
.button{
    display: block;
    padding: 5px 10px;
    margin:5px auto;
    width:70%;
    clear: both;
    color:#fff;
}
button a{
    text-decoration: none;
    color:#e5e5e5;
    display: block;
    transition: ease-in 0.12s;
}
button.green:hover{
    background-color: #00B200;
}
button:hover a{
    color:#fff;
    transform:scale(1.1);
}
.back > .button.green{
margin-top: 45px;
}
button{
    color:#000;
    border:none;
}
button.green{
    background-color: #419907;
    transition:background-color 0.4s ease-in;
    -webkit-transition:background-color 0.4s ease-in;
}
button.blue{
    background-color:#063e9b;
    transition:background-color 0.4s ease-in;
    -webkit-transition:background-color 0.4s ease-in
}

/* end of making things pretty*/



/* do some flipping */

.flip-container {
    perspective: 900px
    transform-style: preserve-3d;
}

.flip-container:hover .back {
    transform: rotateY(0deg) scale(1.3);
  z-index:4;
    }

.flip-container:hover .front {
      transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 185px;
    height: 150px;
}

/* flip speed goes here */
.flipper {
    transition: 0.9s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.4s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
  width: 185px;
  height: 145px;
}

.front {
    z-index: 2;
    transform: rotateY(0deg);
  background-color: #333;
  color: #000;
  text-align: center;
}

.back {
    transform: rotateY(-180deg);
  background-color: #010b15;
  border: solid 2px #034baf;
}

Answer 1

Add z-index: 2 !important; to .flip-container:hover

.flip-container:hover {
    transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    z-index: 2 !important;
}

Fiddle

Answer 2

Because you put the first z-index on this selector #games-container div.game , you can change the hover selector to this to remove the important property :

#games-container div.game:hover {
    transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    z-index: 2;
}

See it here