merkwürdige CSS-webkit-transform-scale-schweben in Chrom

Ich bin sehr neu zu codieren, sondern erlebt auf dem computer.
Auf der folgenden website ich bin momentan dabei, ein vergrößern-on-hover-Effekt, geschrieben in css allein.

LINK: http://3514.linux3.testsider.dk/da/produkter/skumdetektorer
Wenn Sie einen Blick in Chrome am 1., 4., 5., 6., 7.... Bilder, haben Sie einen schweren stapeln/layer/priotrity problem auf schweben.

Jedem browser funktionierte gut eine Woche her, aber plötzlich Chrome gestartet handeln...

Ich hatte das gleiche problem mit allen Browsern auf den ersten, aber später habe ich es behoben, indem die Suche im internet und fand heraus, dass ein z-index Einstellung war die Antwort auf die 'Seite-Priorität" problem.

Ich habe versucht, die Suche jede Ecke des Internets, mit jedem Wort wahrscheinlich im Zusammenhang mit dem Thema, aber habe nichts gefunden.

Folgenden ist der verwendete code auf der Website:

<style type="text/css">

.hovergallery img {
    -webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
    -moz-transform:scale(1); /*Mozilla scale version*/
    -o-transform:scale(1); /*Opera scale version*/
    -webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
    -moz-transition-duration:0.5s; /*Mozilla duration version*/
    -o-transition-duration:0.5s; /*Opera duration version*/
    opacity:1; /*initial opacity of images*/
    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
}

.hovergallery img:hover {
    -webkit-transform:scale(1.6); /*Webkit:Scale up image to 1.2x original size*/
    -moz-transform:scale(1.6); /*Mozilla scale version*/
    -o-transform:scale(1.6); /*Opera scale version*/
    box-shadow:0px 0px 30px gray; /*CSS3 shadow:30px blurred shadow all around image*/
    -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
    -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
    opacity:1; /*initial opacity of images*/
    -webkit-perspective:1000;
    -webkit-backface-visibility:hidden;
    z-index:999;
}
    </style>

webkit-perspective: und webkit-backface-visibility: werden verwendet, um zu stoppen Bilder in chrome flackert auf schweben.

z-index: verwendet wird, zu überschreiben pageholder-Schatten-Priorität (998 in der rechten Seite der Seite), so dass die Bilder geht über und nicht unter Sie auf schweben. Wie Sie sehen, wenn der Leser den link im Firefox oder irgendeinem anderen browser -...

  • Der link ist nicht wirklich führen, um etwas von Wert, fürchte ich... es ist eine pin erforderlich, und es ist nicht eine funktionierende input-Feld.. es sei denn, Sie geben nur 3514.linux3.testsider.dk ... wäre die Eingabe eines pin-gibt es Zugang zu 3514.linux3.testsider.dk/da/produkter/skumdetektorer zu?
  • Scheiße, ich vergaß! die PIN ist 5693!! und die Anmelde-Adresse ist 3514.linux3.testsider.dk wenn Sie angemeldet sind, drücken Sie den direkten link in die oben gestellte Frage. DANKE >SIE!
  • Nur nach oben.. Wie ist es gelaufen?
InformationsquelleAutor user1435321 | 2012-06-04
  1. 4

    Versuchen, und fügen Sie position:relative; zu Ihrem .hovergallery img

    .hovergallery img {
    -webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
    -moz-transform:scale(1); /*Mozilla scale version*/
    -o-transform:scale(1); /*Opera scale version*/
    -webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
    -moz-transition-duration:0.5s; /*Mozilla duration version*/
    -o-transition-duration:0.5s; /*Opera duration version*/
    opacity:1; /*initial opacity of images*/
    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
    position:relative;
}
    InformationsquelleAutor MNilson
  2. 4

    Hatte ich ähnliches problem. Ich haben image gallary und ich verwendet, Deckkraft, transform und scale-Effekt in der hover-Effekt. jedes Bild nach der Skalierung war immer transparent und zeigt andere Bilder im hintergrund habe ich geändert, den code anhand der oben genannten Diskussionen und es ist eingefügt unter 

    .gallary{
    text-align:center;  

}

.gallary_img {
    display:inline-block;    
}

.gallary_img img{
border: 1px solid #660000;
display:inline-block;  
opacity:0.4;
-webkit-transition: -webkit-transform 0.5s ease-in;
**position:relative;**
}
.gallary_img img:hover {
    opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */
    border: 1px solid #660000;
    -moz-transform:  scale(2);
    -webkit-transform:  scale(2);
    transform: scale(2);
    **z-index:999;**

}
    InformationsquelleAutor Shraddha
Schreibe einen Kommentar