Tutorial CSS3 Transition Fade Effekt
Dieser CSS3 Transition Effekt wird hier mit dieser CSS dargestellt. Fügt diese CSS “Zwischen Head Tags” im Layout Eurer Seite am Button “HTML” ein.
<style>
#blend { position: relative }
#blend img#top:hover { opacity:0 }
#blend img { position: absolute;
top: 0; left: 0; opacity: 1;
transition: opacity 3s
}
</style>
Da in dieser CSS eine absolute Position für das Bild angegeben wird, muss die HTML-Ausgabe von NOF auch auf einer absoluten Position stehen, wie z.B. die HTML-Ausgabe “HTML5”. Die Dauer vom Transition-Effekt könnt Ihr in Sekunden einstellen, hier habe ich das auf 3s eingestellt.
Zieht Euch das Bild, das bei Mausüber angezeigt werden soll, auf Eurer Seite auf. Das andere Bild lest Ihr in der Assets-Verwaltung mit der rechten Maustaste ein und hakt “Datei immer publizieren” an, da NOF ja das zu wechselnde Bild sonst nicht kennt und auch nicht mit publizieren würde.
Markiert das Bild und klickt im Fenster “Bild-Eigenschaften” auf den Button “HTML”. Dort fügt Ihr das DIV mit der id="blend" (aus der CSS oben) ein:
“vorher” (vor dem Tag):
<div id="blend">
nach dem Tag fügt Ihr das zusätzliche, in der Assets-Verwaltung eingelesene, Bild (hier “sonnenuntergang.jpg”) ein und schließt das DIV wieder. Achtet bei der Quellenangabe zum Bild auf die korrekte relative Pfadangabe - bei mir liegt dieses Bild im gleichen Verzeichnis wie meine Seite.
“nachher” (nach dem Tag)
<img id="top" src="sonnenuntergang.jpg" />
</div>
Viel Spaß!
