onmouseover Fade in reinem HTML / CSS möglich?

[WU*Martin]

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)

<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 :)

 

[Aaron3219]

https://www.w3schools.com/jquery/jquery_fade.asp
Das hier sollte dir helfen.

 

[WU*Martin]

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]

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?

 

[WU*Martin]

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]

Das wäre meine 2. Vermutung gewesen.
Ich dachte du wolltest ein komplettes fadeout des bildes und ein komplettes fade in

 

[WU*Martin]

Jaaa, es hat endlich funktioniert, dankeschön ihr zwei :)

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

 

[Sailor]

Doch, Safari sollte das auch unterstützen. Allerdings muss man da im CSS notieren:

-webkit-transition: opacity 1.0s;
transition: opacity 1.0s;

https://www.w3schools.com/css/css3_transitions.asp