Css3 Transition auch bei Bildern?

[onpoint]

Hallo

Ich bin es wieder...diesmal gehts um etwas anderes.

Ich hätte auch in den anderen Thread schreiben können, jedoch können Leute, die die selbe Frage haben, das Thema hier wohl schneller finden.

Es geht um CSS3 Transition.

Es funktioniert mit Texten, mit css erstellten Oberflächen und deren hover-Effekten sehr gut, doch funktioniert das auch mit Bildern?

Ich ersetze ein Foto mit einem anderen Foto. Den Übergang möchte ich verzögern. Was gebe ich ihm bei "transition-property" mit? Habe diesbezüglich leider nichts gefunden.

Lieben Gruß

 

[simonpicos]

AW: Css3 Transition auch bei Bildern?

Du kannst einem beliebigen Element ein background-image zuweisen und das per css ändern.. (bei hover, o.ä.)

http://dabblet.com/gist/1829656

 

[onpoint]

AW: Css3 Transition auch bei Bildern?

Du kannst einem beliebigen Element ein background-image zuweisen und das per css ändern.. (bei hover, o.ä.)

http://dabblet.com/gist/1829656

Hmmm..liegt es an meinem Firefox Browser? Selbst bei deiner Beispielseite lädt das Foto keine Sekunde, wie angegeben. Es ist ein normaler hover-effekt, der sofort geschieht.

Seltsam..

 

[simonpicos]

AW: Css3 Transition auch bei Bildern?

Hmmm..liegt es an meinem Firefox Browser? Selbst bei deiner Beispielseite lädt das Foto keine Sekunde, wie angegeben. Es ist ein normaler hover-effekt, der sofort geschieht.

Seltsam..

Ja scheint am ff zu liegen, der unterstützt das wohl noch nicht.. Cohrome schon.

Wenn du bei CSS bleiben willst, wäre ein workaround, dass du zwei divs (o.ä) übereinander legst und die dann mit opacity ein-und ausblendest..

Alternative: Ist zwar ein etwas anderer übergangseffekt: du packst beide motive in ein bild und verschiebst dann bei hover das hintergrundbild via background-position..

 

[onpoint]

AW: Css3 Transition auch bei Bildern?

Hmm..auch beim Chrome Browser kann ich beim Beispiellink keine Verzögerung feststellen...und ich bin ganz sicher nüchtern!

 

[simonpicos]

AW: Css3 Transition auch bei Bildern?

Kann es sein, dass es daran liegt dass ich auf der 18 beta bin? wenn cih ehrlich bin läuft es ein wenig buggy..
wENN DU NICHT AUF JAVASCRIPT ZURÜCKGREIFEN WILLST; DANN MUSST DU WOHL AUF MEINE ALTERNATIVEN ZURÜCKGREIFEN:: WENN CIH FALSCH LIEGE KORRIGIERT MICH BITTE1

 

[ADcosmos]

AW: Css3 Transition auch bei Bildern?

Hi,

Es funktioniert mit Texten, mit css erstellten Oberflächen und deren hover-Effekten sehr gut, doch funktioniert das auch mit Bildern?

Ich ersetze ein Foto mit einem anderen Foto. Den Übergang möchte ich verzögern. Was gebe ich ihm bei "transition-property" mit? Habe diesbezüglich leider nichts gefunden.

Wieso sollten Transition nicht mit Bildern funktionieren? Nutze ich in meiner Bilder-Galerie. Bei MouseOver wird das Bild größer.

Zum Punkt verzögern, da wäre wohl transition-delay richtig.

Allerdings funktioniert es in Safari nicht mit zwei Bildern. Da müsste man background-position nutzen und das -webkit- (bei transition-delay) davor setzen. Bei Firefox 6 funktioniert es auch, wenn ich -moz- (bei transition-delay) davor setze.

MFg ADcosmos