background-size übergang auf hover bewirkt, dass chrome zu "schütteln" hintergrund Bild

Ich versuche zu erreichen, ein Effekt, den ich kürzlich sah, wo das hintergrund Bild zoomt auf hover. Ich ziemlich viel hat es mit dem Beispiel hier: https://jsfiddle.net/qyh6nbwt/ aber es scheint sehr wackelig (Sie werden verstehen, was ich meine, wenn Sie mit der Maus über Sie), ich bin auf osx läuft neuesten chrome-version, nicht aktiviert es in anderen Browsern noch nicht.
Gibt es eine Möglichkeit zu machen es weicher, so dass es nicht "schütteln" auf vergrößern?

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;
}
  • Sie können Sortieren, fixieren es mit dem hinzufügen von transform: scale(1.1); auf die :hover, das bedeutet aber nicht, lösen Sie es vollständig. Sehr interessiert zu sehen, warum das so ist.
  • muss es ein Hintergrundbild?
  • Gut, ich habe dirty-workaround, wenn Sie sehen wollen : jsfiddle.net/qyh6nbwt/2, Aber Ihr scheint chrome performance-Problem.
InformationsquelleAutor Ilja | 2015-05-13
  1. 3

    nur verwenden, transformieren, skalieren.

    also einfach anstatt dem bg-Bild zu 160% nutzen

    transform:scale(1.5);

    einige Informationen über die css-Eigenschaft transform können Sie finden hier

    verwenden Sie die transform-Skala in Ihrem Fall müssen Sie einen wrapper mit überlauf verborgen, so dass nur der innere div grösser und abgeschnitten vom äußeren div.

    finden Sie in den aktualisierten fiddle.

    Grüße timmi

    • Dies ist eine einfache Lösung, aber auch dies vergrößert den text "Test", die hätten gegen OP ' s Absichten.
    • besser? jsfiddle.net/qyh6nbwt/4
    • Ich hatte Probleme, wenn ein übergang auf die hintergrund-Größe eines div mit einem großen hintergrund-Bild (2Mb) aus dem Bild-browser-cache zum Absturz und zwingt mich zu "force refresh" (STRG+F5), um wiederherstellen das Bild in allen tabs dieses Bild erscheint. Ändern Sie die hintergrund-Größe Umstellung auf eine transform:scale, umgangen, dieser bug.
    InformationsquelleAutor Timotheus Triebl
  2. 1

    Verwendet, transformieren, skalieren, anstatt einer hintergrund-Größe ändern-übergang: https://jsfiddle.net/qyh6nbwt/

    transform: scale(2, 2);
    InformationsquelleAutor Ajarat
  3. 1

    Also machte ich diese meine mission, dies herauszufinden, stellt sich heraus, es war nicht ganz so einfach eine Lösung, wie ich dachte.

    Es ist ein wenig schmutzig, aber Sie brauchen, um den Rahmen Ihrer div innerhalb einer div wie diese:

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

    Dann von hier aus, können Sie als Ziel die Zoomobjektive mehr genau, wie das ist:

    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);    
}

    Können Sie stellen Sie den zoom und die Geschwindigkeit, mit der scale und transition Eigenschaften.

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

    InformationsquelleAutor knocked loose
Schreibe einen Kommentar