Bild Vergrößern auf Hover

Question

Code: https://jsfiddle.net/xakhLafd/

Hallo,

Ich versuche, ein Bild zu haben, auf schweben vergrößert und einen einfachen Übergang zu verwenden. Es funktioniert, aber es scheint manchmal auszufallen. Ich habe versucht, dies zu beheben, indem ich folgende Einstellung festlegte:

-webkit-transition-property: height,width; 

Aber ohne Erfolg. Außerdem versuche ich zu verstehen, wie der Autor dieses Codes (ich habe etwas Code aus einem CSS-Blog) dies erreicht. Ich verstehe, wie das Bild bei Hover seine Breite ändert, aber ich bin mir nicht sicher, warum der Autor negative obere und linke Werte setzt. Ich habe versucht, die Breite, Höhe, oben und links zu bearbeiten, um die gewünschte Größe bei Hover zu erhalten, aber es scheint zu schief werden - wahrscheinlich, weil ich nicht verstehe, was die negativen oberen und linken Werte tun. Kann jemand etwas Licht darauf werfen? Ich habe einige Artikel über negative Ränder gelesen, aber ich verstehe nicht, was hier gemacht wird.

Hier ist der Code:

<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/> 
.thumbnail{ 
    width: 100px; 
    height: 100px; 
} 
.thumbnail:hover { 
    position:relative; 
    top:-50px; 
    left:-35px; 
    width:500px; 
    height:auto; 
    display:block; 
    z-index:999; 
    cursor: pointer; 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease; 
} 

Answer 1

Die top:-50px; left:-35px; in CSS-Regel wird verwendet, das Bild des Mittelpunkts unverändert zu halten, nachdem es vergrößert ist. Andernfalls, wenn das Bild vergrößert wird, werden Sie fühlen, dass es nach rechts unten bewegt wird.

Dies ist jedoch kein gutes Design - Änderung der Breite/Höhe erfordert Berechnung neuer Layout und Neuzeichnen von UI-Elementen auf jedem Animationsframe, was sehr teuer ist (Sie können dies SO für den Unterschied zwischen Repaint und Reflow überprüfen). Deshalb fühlst du dich "es scheint manchmal auszufallen."

Ein besserer Weg ist die Verwendung transform. Bitte überprüfen Sie die jsfiddle, die das Problem beheben. Der neue CSS-Code ist:

.thumbnail{ 
    width: 100px; 
    height: 100px; 
    display:block; 
    z-index:999; 
    cursor: pointer; 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease; 
} 
.thumbnail:hover { 
    transform: scale(5); 
} 

Answer 2

Hier ist die Geige ich geschaffen, der das Problem behebt. Ich habe die relative Position weggenommen und setze die Höhe auf auto statt auf 100px.

hier ist der Code, den ich tat.

<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" 
class="thumbnail"/> 

.thumbnail{ 
    width: 100px; 
    height: auto; 
    position:relative; 
} 
.thumbnail:hover { 
    width:500px; 
    height:auto; 
    display:block; 
    z-index:999; 
    cursor: pointer; 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease; 
} 

Sorry vergessen zu aktualisieren die Geige hier ist der neue Link.

https://jsfiddle.net/xakhLafd/1/