Antworten auf deine Fragen:
Neues Thema erstellen

onmouseover Fade in reinem HTML / CSS möglich?

M

martin22

Guest

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)

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

owieortho

Aktives Mitglied

Moin,
dies lässt ein Bild ein- bzw. ausblenden, wenn die Mouse über dem Bild steht:
Code:
.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

Hat es drauf

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:

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben