onmouseover Fade in reinem HTML / CSS möglich?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

WU*Martin

Mitglied
27 Juni 2010
89
1
8
Hallo ihr lieben,

ich habe nun wirklich schon eine ganze weile gegoogelt und bin langsam ein wenig am verzweifeln... :(

Das ziel ist es, einen mouseover bei einem bild zu erzeugen, das nicht im hintergrund liegen soll. Der Code dafür ist dieser hier (der code funktioniert auch wunderbar)

Code:
<img src="imgs/01.jpg" width="100%" height="30%"
onmouseover="this.src='imgs/02.jpg';" onmouseout="this.src='imgs/01.jpg';">

Allerdings möchte ich nun einen fade in- /out einbauen, da der bildwechsel zwar funktioniert, aber sehr abrupt (und das sieht kacke aus^^).

Kann mir da jemand helfen?
Alles was ich im internet finde funktioniert lediglich mit javascript & co. Wenn mir jemand helfen könnte wäre ich sehr dankbar :)
 

WU*Martin

Mitglied
27 Juni 2010
89
1
8
hey danke für die antwort, leider kenne ich mich mit der materie da überhaupt nicht aus!
gibts keine reine lösung mit html/css only?
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.142
236
63
19
Naja es gibt natürlich CSS-Animationen:
https://www.w3schools.com/w3css/w3css_animate.asp

Aber du wechselst ja das Bild. Das ist mit CSS schon nicht zu lösen, sondern mit Javascript
(was du ja mit "this.src='imgs/02.jpg';" schon angewendet hast).
Also was mit CSS möglich wäre, ist das Bild auszufaden und wieder einzufaden.
Was du willst ist das aber nicht.
Du willst ja ein fadeout des Bildes, dann ein Wechsel des Bildes und dann wieder ein Fade-in oder nicht?
 
Zuletzt bearbeitet:
  • Like
Reaktionen: WU*Martin

WU*Martin

Mitglied
27 Juni 2010
89
1
8
Also wenn man mit dem Cursor über das Bild geht soll es wechseln, und wenn der Cursor wieder weg geht wieder zum alten Ursprung zurück.
Das klappt wie gesagt auch wunderprächtig, nur eben das Fade Gedöns fehlt.

- Gibt es eine Möglichkeit, das Script innerhab der Seite einzubinden, statt in einer externen Datei?
- Zweitens weiss ich nicht, wie ich das <img> Tag dann zuweisen soll...
mit <img src="xxx.jpg" style="fade"> ?
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.142
236
63
19
Das wäre meine 2. Vermutung gewesen.
Ich dachte du wolltest ein komplettes fadeout des bildes und ein komplettes fade in
 
  • Like
Reaktionen: WU*Martin

WU*Martin

Mitglied
27 Juni 2010
89
1
8
Jaaa, es hat endlich funktioniert, dankeschön ihr zwei :)

Allerdings funzt der Mist nicht im Safari, nur in Firefox... xD :confused: Kann man das irgend wie machen?