onmouseover Fade in reinem HTML / CSS möglich?

[martin22]

Hallo ihr lieben,

ich habe nun wirklich schon eine ganze weile gegoogelt und bin langsam ein wenig am verzweifeln...
Seit einer stunde bin ich jetzt am suchen und komme auf keinen grünen zweig!

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
Ich habe auch schon diesen Link hier gefunden https://www.w3schools.com/jquery/jquery_fade.asp aber das überfordert mich total mit solchen sachen kenne ich mich nicht so gut aus, ich bin noch ein wenig neu auf dem gebiet.

 

[owieortho]

Moin,
dies lässt ein Bild ein- bzw. ausblenden, wenn die Mouse über dem Bild steht:

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.5;
      }

Ich habe das Folgende jetzt nicht ausprobiert: Wenn nach dem Ausblenden ein weiteres Bild sichtbar sein soll (image swap), dann würde ich jetzt versuchen die größengleichen Bilder zu stacken (z-index).
Viel Erfolg
O.

 

[Myhar]

@owieortho
Der Code ist falsch, so ist er korrekt:

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.5;
      }

 

[Gelöschtes Mitglied 633957]

Der Code ist falsch

Falsch ist vielleicht ein bischen hart! Die moz- und webkit Prefix ist nur nicht mehr erforderlich, sofern man nicht auf User trifft, die ihren Browser in den letzten 5 Jahren nicht geupdatet haben!

 

[owieortho]

@Myhar und @tynick, danke für den Hinweis.

 

[Myhar]

Falsch ist vielleicht ein bischen hart! Die moz- und webkit Prefix ist nur nicht mehr erforderlich, sofern man nicht auf User trifft, die ihren Browser in den letzten 5 Jahren nicht geupdatet haben!

Falsch auch deshalb, weil die Präfixe immer vor der eigentlichen, richtigen definition stehen sollen. Ich weiß, das sieht man auch oft im Internet in eigentlichen hilfreichen Tutorials oft falsch, deshalb habe ich hier bewusst darauf hingewiesen. Sonst lernt und merkt man es sich falsch.
Richtig wäre mit Präfixen also folgender Code:

.fade {
  opacity: 1;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
}

.fade:hover {
  opacity: 0.5;
}

Wie du aber schon richtig angemerkt hast, werden die Präfixe bei transition nicht mehr benötigt.