Ich schaute auf die Javascript Bildkontrolle auf der Google-Suchseite und ich fragte mich, wie ich es replizieren könnte. Ich kann sehen, dass es im Hoverover ein Bild in die Luft sprengt, aber ich kann den Code, den sie verwenden, nicht in HTML finden.Wie funktioniert die heutige Google Bilderkontrolle
Kann mir jemand helfen.
Ich antwortete gerade auf eine ähnliche Frage @Jquery Image popout on hover - meine Antwort war ein CSS3 Beispiel.
Auch sehen http://jsfiddle.net/Kai/x4Frn/
Das ist nett, aber jemand weiß, wie Google es getan – Nelson
die JSfiddle-Lösung funktioniert nicht in IE8. – frictionlesspulley
@frictionlesspulley Yep, ich erwähnte Browserunterstützung in der Verbindung zur ursprünglichen Antwort. – Kai
Blick auf die Quelle:
<div id="hplogo-..." style="background-color: rgb(153, 77, 51); position: absolute; width: 201px; height: 121px; left: -28px; top: 31px; z-index: 17;">
<div style="overflow: hidden; top: 6px; left: 6px; position: absolute; height: 109px; width: 189px; ">
<a href="https://stackoverflow.com/search?q=...">
<img src="/logos/..." border="0" style="position: absolute; left: -1px; top: -110px; ">
</a>
</div>
</div>
Die ersten <div> Positionen das Bild und fügt eine Hintergrundfarbe. Die zweite <div> verbirgt den Überlauf, um zu vermeiden, dass das Bild aus der Box kommt und 6 Pixel vom ersten div platziert wird, wodurch ein Rand entsteht. Darüber hinaus wird das Bild platziert, und da es ein Sprite ist, hat es einen Offset.
Das Schweben des ersten Div ändert die Breite und Höhe der ersten beiden Divs und verschiebt das erste Div neu.
Diese Frage ist jetzt völlig nutzlos. Über welches Bild redest du? – TRiG