Z-Index-Problem bei Hover-Effekt mit Transformation drehen und skalieren

Question

Ich habe, was ich glaube, ein Z-Index-Problem mit meinem Drehen und Skalieren Hover-Effekt.

Fiddle here

, wenn sie über das Bild schwebt sie dreht und skaliert und zeigt die Rückseite des Bildes mit Details usw.

Das Problem ist, die Bilder sind alle in Reihen und die Spanne zwischen ihnen ist ziemlich klein. Wenn sie skalieren, müssen sie sich auf beiden Seiten überlappen. Im Moment ist diese Überlappung links und oben gut, aber überlappend ist unten auf den Bildern rechts und unten .. wirklich seltsam!

Hier ist mein 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

Da Sie die ersten z-index auf diesem Wähler #games-container div.game setzen, können Sie die Hover-Wähler auf diese ändern, um die wichtige Eigenschaft zu entfernen:

#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

Answer 2

hinzufügen z-index: 2 !important; zu .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