Hintergrund-Größe Übergang bei Hover verursacht Chrom zu "schütteln" Hintergrundbild

Ich versuche, einen Effekt zu erzielen, den ich vor kurzem gesehen habe, wo Hintergrundbild auf Hover zoomt. Ich habe es ziemlich genau hier mit Beispiel gemacht: https://jsfiddle.net/qyh6nbwt/ aber es scheint sehr wackelig zu sein (Sie werden verstehen, was ich meine, indem ich darüber schwebe), ich bin auf osx mit der neuesten Chrome-Version, habe es in anderen Browsern noch nicht überprüft. Gibt es eine Möglichkeit, es weicher zu machen, damit es beim Vergrößern nicht "schüttet"?Hintergrund-Größe Übergang bei Hover verursacht Chrom zu "schütteln" Hintergrundbild

HTML

<div id="example"> 
    test 
</div>

CSS

#example { 
    background-image: url(http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg); 

    background-position: center center; 
    width: 250px; 
    height: 250px; 
    transition:all 1000ms ease; 
    background-size: 100% auto; 
} 

#example:hover { 
    background-size: 160% auto; 
}

Quelle

2015-05-13 Ilja

Sie können es reparieren, indem Sie 'transform: scale (1.1);' auf ': hover' hinzufügen, aber das behebt es nicht vollständig. Sehr interessiert zu sehen, warum das so ist. –

Muss es ein Hintergrundbild sein? –

Nun, ich habe dreckige Workaround, wenn Sie sehen möchten: https://jsfiddle.net/qyh6nbwt/2/ Aber es scheint Chrom Leistungsproblem. –

verwenden nur, Maßstab verwandeln.

so einfach anstelle der Einstellung des bg Bild zu 160% Verwendung

transform:scale(1.5);

einige Informationen über die CSS-Eigenschaft verwandeln Sie here

finden die Transformation Maßstab in Ihrem Fall verwenden Sie benötigen Wrapper mit Überlauf versteckt, so dass nur das innere div größer wird und vom äußeren div abgeschnitten wird.

fiddle.

Grüße timmi aktualisiert siehe

Quelle

2015-05-13 15:07:28

Dies ist eine einfache Lösung, aber auch hier wird auf den Text "Test" gezoomt, der gegen die Absichten von OP verstoßen haben könnte. –

besser? http://jsfiddle.net/qyh6nbwt/4/ –

Ich hatte Probleme, wenn ein Übergang auf der Hintergrund-Größe eines Div mit einem großen Hintergrund-Bild (2Mb) den Browser-Image-Cache zum Absturz brachte, zwingt mich zu "zwingen." Refresh "(STRG + F5), um das Bild in allen Browser-Registerkarten wiederherzustellen, erscheint dieses Bild.Ändern des Hintergrundgrößen-Übergangs in eine Transformation: skalieren, diesen Fehler umgehen. –

transformieren Maßstab anstelle eines Hintergrund-Größenänderung Übergang:

transform: scale(2, 2);

Quelle

2015-05-13 15:10:50 Ajarat

Also ich diese meine Aufgabe gemacht, um dies herauszufinden, stellt sich heraus, Es war nicht ganz so einfach wie ich dachte.

Es ist ein wenig schmutzig, aber Sie müssen Ihre div innerhalb eines div wie folgt gestalten:

<div class="example"> 
    <div></div> 
    <p>test</p> 
</div>

Dann von hier, um die zoomt genau mehr ausrichten können, wie folgt aus:

div.example { 
    height: 250px; 
    width: 250px; 
    overflow: hidden; 
    position: relative; 
} 

div.example > div { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    -moz-transition: all 1.5s; 
    -webkit-transition: all 1.5s; 
    transition: all 1.5s; 
    -moz-transform: scale(1,1); 
    -webkit-transform: scale(1,1); 
    transform: scale(1,1); 
    background-image: url('http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg'); 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    background-size: cover; 
    z-index: -1; 
} 

div.example:hover > div { 
    -moz-transform: scale(2,2); 
    -webkit-transform: scale(2,2); 
    transform: scale(2,2);  
}

Sie können den Zoom und die Geschwindigkeit mit den Eigenschaften scale und transition anpassen.

Hier ist eine funktionierende fiddle zu demonstrieren. Hoffe, das hilft, ich habe in Chrome/Safari/Firefox eingecheckt und es scheint ziemlich gut zu funktionieren.

Quelle

2015-05-13 15:23:16

Hintergrund-Größe Übergang bei Hover verursacht Chrom zu "schütteln" Hintergrundbild

Antwort

Verwandte Themen