CSS-Hover-Effekt und HTML: Positionierung der beiden Bilder

Um ein Bild durch ein anderes zu ersetzen, kannst du die Class image-mouseover im Customizer oder im Child-Theme in der style.css definieren. Die Attributwerte können dann je nach Bedarf und Zweck angepasst werden.

/* Class: .image-mouseover */
.image-mouseover {
  position: relative;
  width: auto;
  height: auto;
  float: left;
  margin: 0 15px 15px 0;
}
.image-mouseover .before {
  z-index: 1;
}
.image-mouseover:hover .after {
  display: block;
}
.image-mouseover .after {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

^{Pr. WP-Freund}

Um schnell zwischen Bildern zu wechseln, kann die Eigenschaft display: none verwendet werden. Wenn jedoch ein weicher Übergang gewünscht wird, sind Eigenschaften wie opacity und transform geeignet. Anstatt der letzten beiden Selektoren, die im vorherigen Beispiel gezeigt wurden, können die folgenden Selektoren verwendet werden.

.image-mouseover:hover .after {
  display: block;
  opacity: 1;
}

.image-mouseover .after {
  opacity: 0;
  transition: opacity 0.5s;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

Im HTML ist das dann die Class image-mouseover. Siehe weiter hier im Beitrag. Erst mal …

Die Bilder nach links oder rechts floaten!

Dies ist eine wichtige Lektion. Die beiden Bilder sollten nicht ohne den Float-Stil Beispiel float: right; verwendet werden. Der Fehler ist hier im Mouseover-Bild auf der rechten Seite zu sehen.

Deshalb sollten die Bilder mit Float-Stilen positioniert werden, da dies eine genauere Positionierung ermöglicht. Andernfalls müssten sie mit Margins ausgeglichen werden.

Die Bilder floaten:

• style="float: left;"
• style="float: right;"

Das mit dem margin

• Die CSS-Eigenschaft margin wird verwendet, um Abstände um ein Element herum zu definieren. Wenn sie bei einem Bild verwendet wird, kann sie beispielsweise den Abstand zwischen dem Text und dem Bild oder den Abstand des Bildes zum Rand des übergeordneten Elements einstellen.

Das folgende Beispiel ist für einmaligen Gebrauch im HTML:

<div class="image-mouseover" style="float: right; margin: -40px 60px 0;">
    <img class="before alignnone" src="https://..wurm1.svg" alt="image" width="130" height="163" />
    <img class="after alignnone" src="https://..wurm2.svg" alt="image" width="130" height="163" />
</div>

Die Trennung von Inhalt und Layout ist praktisch und konform mit der Definition einer Class:

.apfel-re {
    margin: -40px 60px 0;
}

In CSS wird die margin-Eigenschaft in der Reihenfolge "oben, rechts, unten, links" definiert. Wenn die margin: -60px 50px 0; angeben sind, bedeutet das:

• -60px für den oberen Rand
• 50px für den rechten Rand
• 0 für den unteren Rand
• Der linke Rand wird nicht spezifisch angegeben und bleibt daher auf 0

Das negative Vorzeichen für den oberen Rand (-60px) bewirkt, dass das Element um 60 Pixel nach oben über den normalen Layoutfluss hinausragt.

Dies ist passend für die Normalansicht, aber im Lesemodus sollten die Margins angepasst werden. Deshalb ist es ratsam, eine separate Classe zu erstellen, zum Beispiel:

.readermode .apfel-re {
    margin: -60px 150px 0;
}

Welche Class dann im <div> eingefügt werden soll, hängt von der funktionalen Anforderung ab. Zum Beispiel:

<div class="image-mouseover apfel-re" style="float: right;>
    <img class="before alignnone" src="https://../wurm1.svg" alt="image" width="130" height="163" />
    <img class="after alignnone" src="https://../wurm2.svg" alt="image" width="130" height="163" />
</div>

Die Class apfel-re im <div> ist funktional für die Margins, aber nicht, wenn man auch die Bildgröße über CSS steuern möchte.

Weiter ist das für die Mobilansicht noch immer nicht passend, daher sollte dies in einem @media-Block geschrieben werden. Das CSS könnte wie folgt aussehen, einschließlich separater Bildgrößen für den Lesemodus:

@media (min-width: 768px) {
    .apfel-re {
        margin: -40px 60px 0;
    }
    .readermode .apfel-re {
        margin: -60px 150px 0;
        width: 150px;
        height: 188px;
    }
}

• Zum Thema haben wir hier den richtigen Beitrag '@media' Queries: Webdesign für ungleiche Bildschirmgrößen.

Die Class apfel-re erfolgt nun anstatt im div den beiden img-Classen, somit ist die Bildgröße über CSS funktional:

<div class="image-mouseover" style="float: right;">
    <img class="before alignnone apfel-re" src="https://../wurm1.svg" alt="image" width="130" height="163" />
    <img class="after alignnone apfel-re" src="https://../wurm2.svg" alt="image" width="130" height="163" />
</div>

Grundsätzlich muss dem Bild im HTML sowohl die width als auch die height zugewiesen werden, um das Bild visuell erscheinen zu lassen. Wie im Beispiel mit dem Lesemodus, das nach dem Umschalten in den Normalmodus zu sehen ist.

Sollen beide Bilder zentriert werden?

Hierfür eignet sich hier ein .apfel-zent Selektor mit folgendem Styling:

.apfel-zent {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 180px !important;
    height: 225px !important;
}

Das !important ist hier der Website bedingend und sekundär. Eine andere Bildgröße sollte separat in einem Selektor erfolgen.

Für beide Bilder in einem zentrierten Layout:

<div class="image-mouseover apfel-zent">
    <img class="before" src="https://../apfel1.svg" alt="image" width="180" height="225" />
    <img class="after" title="… Hurra da bin ich!" src="https://../apfel2.svg" alt="image" width="180" height="225" />
</div>

Apfel, cdz
Wurm, memoangeles

Um sicherzustellen, dass das zweite Bild bei Mouseover ebenfalls zentriert wird, ist eine andere Kennzeichnung nicht so geeignet. Beispielsweise ist die Kennzeichnung style="margin-left: 135px; zwar mittig, aber nicht responsiv. Auch die Verwendung von aligncenter und anderen CSS-Stilen sind umstänlicher und führen oft nicht zum gewünschten Ergebnis.

Das SVG, ob das Bild mit
oder ohne Hintergrund?

So im Untertitel: Siehe da! – es ist hier zu sehen. Im Mouseover des Apfels rechts zeigt sich das überlagert. Denn hier ist das SVG-Bild der Class after ohne Hintergrund. …

So nächst das erste Bild mit Class grayscale

Hinweis: Der Website im 'Dunkel-Modus' ist das schwer zu sehen.

Also ist im Customizer oder Child-Theme in der style.css eine Class erstellen.

/* grayscale(wert) – Graustufe */
.grayscale {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

<div class="image-mouseover" style="float: left;">
    <img class="before grayscale alignnone" style="margin-right: 10px;" src="https://..Foto.jpeg" alt="image" width="250" height="167" />
    <img class="after alignnone" style="margin-right: 10px;" src="https://..Foto.jpeg" alt="image" width="250" height="167" />
</div>
<p style="clear: both;">Text Text Text.</p>

Weiter: So allein mit <div class="image-mouseover">, also ohne style="float: left;", ist zu bemerken, dass der Text nicht um das Bild fließt und der Hover die ganze Breite ausfüllt. Somit ist es auch schöner, das Floaten anzuwenden. Wenn dann aber der Text darunter zu sein hat …

Im HTML style="clear: both;"

• <p style="clear: both;">Text Text Text</p>

Dasselbe so in Graustufe mit nur einem Bild

Zudem ist dem Bild, das von S/W auf farbig wechseln soll, eine Class zu erstellen. Somit ist dann nur ein Bild anstatt der zwei wie das Beispiel oberhalb. – CSS die Class grauauto, die Attributwerte individuell.

/* Class: grau-auto */
.grauauto img {
  display: block;
  width: auto;
  height: auto;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
  filter: grayscale(1);
  transition: 0.5s;
}
.grauauto:hover img {
  filter: grayscale(0);
}

<div class="grauauto">
    <img src="https://..schul.svg" alt="image" width="600" height="400" />
</div>

Also in Einfachheit S/W zu farbig:

Bild durch Hover-Effekt ausblenden: Text wird sichtbar

In Bezug auf das Beispiel ist nach dem ausblenden von Bild der Text zu sehen.

Das sind nun drei Varianten, wobei der ersten in Darstellung so ruckzuck ist. Die Zweite das Beispiel mit transition. Dann die dritte Variante, wie das mit background-image zu machen ist.

• Die ersten beiden Varianten unterscheiden sich untereinander, dass der ersten Variante zwei Bilder im HTML sind. Das zweite Beispiel (zweite Variante) ist aber das schönere, aber ich belasse hier auch die vorhergehende Variante zum Durchsehen. – evtl. ist das auch mal von nutzen.
• Die dritte Variante ist das Bild im CSS als background-image.

Anmerkung: Den Beispielen ist das mit Shortcode vom Plug-in Statify Widget. 

Erste Variante

Dem Beispiel ist der Text zwischen die zwei Bilder zu setzten. … Mouseover erst mal den Farbroller.

… besuch ebenda? – so in 8-Tage

Das Beispiel obig ist mit zwei Bilder, wobei dem ersten Bild ein Hintergrund dabei ist, welches falls Dunkelmodus zu sehen ist:

Die Bilder sind hier SVG. Das erste Bild ist evtl. mit Hintergrund zu arrangieren, weil so auch der Griff seitlich abgedeckt ist.

Folgend nun das HTML

<div class="image-mouse">
    <img class="before alignnone" src="https://../farbroller.svg" alt="image" width="225" height="70" />
    <p style="margin: -85px 0 0 35px; font-size: 16px;">[statify-count prefix="d.h. hier in 8-Tage:" suffix="x"] … ich danke ziemlich! –.</p>
    <img class="after alignnone;" src="https://../farbroller-hintergrund.svg" alt="image" width="225" height="78" />
</div>
<p style="clear: both;">Text</p>

Natürlich ist zur obigen Class image-mouse diese auch zu erstellen.

/* Class: image-mouse */
.image-mouse {
  position: relative;
  width: auto;
  height: auto;
  float: left;
  margin: 5px 10px 10px 0;
}

.image-mouse .before {
  z-index: 1;
}

.image-mouse:hover .after {
  display: none;
}

.image-mouse .after {
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

Wie immer das Fluchten bleibt für sich. – dass es passt!

Zweite Variante

Weiter nun das mit transition. Somit ist das erste Bild ohne Hintergrund, im Dunkelmodus konform und die Animation lässt sich so viel schöner arrangieren.

HTML

<div class="image-mouses">
    <p style="margin: 10px 0 0 40px; font-size: 16px;">[statify-count prefix="mag sein" suffix="×" days="8"] … Dankeschön. –.</p>
    <img class="alignnone;" src="https://../farbroller.svg" alt="image" width="225" height="78" />
</div>
<p style="clear: both;">Text</p>

Weiter das CSS:

.image-mouses {
  position: relative;
  width: 225px;
  height: auto;
  float: left;
  margin: 5px 10px 10px 0;
  overflow: hidden;
  height: 70px;
}

.image-mouses img {
  position: absolute;
  top: 0;
  left: 0;
  transition: left 1s ease-out;
}

.image-mouses:hover img {
  transition: 0.25s ease-in;
  left: -142px;
}

Wie immer das Fluchten bleibt für sich. – dass es passt!

Oder die Lösung mit background-image, dann ist folgendes zu machen:

Dritte Variante

https://jsfiddle.net/

Des Beispiels:

<div class="abroller">
  <div class="content">
    <p style="margin-top: -5px; margin-left: -25px; font-size: 16px; font-weight: bold; color: #77a1a0;">
      [statify-count prefix="mag sein" suffix="×" days="8"] &nbsp;&nbsp;&nbsp;…
    </p>
  </div>
  <div class="image"></div>
</div>
<p style="clear: both;">Text</p>

.abroller {
  position: relative;
  height: 50px;
  width: 120px;
  display: flex;
  align-items: center;
  padding: 0px 19px 6px 50px;
  margin-bottom: -30px;
  margin-left: auto;
  margin-right: auto;
}
.abroller .image {
  position: absolute;
  margin-top: -20px;
  background-image: url(https://wegerl.at/wp-content/uploads/2022/06/farbroller-3.svg);
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  left: 0;
  transition: background 1s ease-out;
}
.abroller:hover .image {
  transition: 0.25s ease-in;
  background-position: -119px;
}

Wie immer das Fluchten bleibt für sich. – dass es passt!

Verwendung von 'transform: rotateY(720deg)' und Einfügen eines dritten Bildes zwischen zwei anderen

Beispiel von Animation:

Das SVG-Bild ist in drei Teile zu zerlegen. Das Erste in Original, das Zweite ohne Propeller und mit Hintergrund. Das dritte Bild der Propeller und ohne Hintergrund.

1. Die Mütze im Original und ohne Hintergrund. Das erste Bild ist dasjenige, das zuerst sichtbar ist.
2. Das zweite Bild ist ohne Propeller mit Hintergrund. Das zweite Bild zeigt dasselbe Bild ohne Propeller und mit einem Hintergrund. Es wird nur sichtbar, wenn die Maus darüber bewegt wird. Da das zweite Bild einen Hintergrund hat, wird das erste Bild abgedeckt.
3. Das dritte Bild ersetzt den Propeller vom ersten Bild. Gleichzeitig wird der Propeller im dritten Bild visuell dargestellt und ersetzt den Propeller im ersten Bild. Dieser Propeller soll sich nun auch drehen.

Es funktioniert auch so mit nur dem ersten und dritten Bild, die beide ohne Hintergrund sind. Die Animation wirkt aber viel besser mit den drei Bildern. Siehe hier nochmals oben.

Das CSS besteht aus zwei Teilen. Zunächst wird wie in Tab 1 des Abschnitts 'CSS-Hover-Effekt und HTML' eine erste Class definiert. Anschließend ist wie hier gezeigt eine weitere Class zu erstellen, die für die Rotation der Propeller verantwortlich ist.

/* Rotate horizontal=rotateY, Class myrot */
.myrot:hover {
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transform: rotateY(720deg);
  -moz-transform: rotateY(720deg);
  -o-transform: rotateY(720deg);
  -ms-transform: rotateY(720deg);
  transform: rotateY(720deg);
}

Animation mit zwei Bilder:

• Da ist im zweiten Bild, das auch mit <img class="after…  dann die Class Namens myrot dabei.

<div class="image-mouseover" style="float: right;">
  <img class="before alignnone" style="margin-top: -18px;" src="https://../geek.svg" alt="" width="150" height="150" />
  <img class="after myrot alignnone" style="margin-top: -18px;" src="https://../geek-propeller.svg" alt="" width="150" height="150" />
</div>

Animation mit drei Bilder:

• Hierbei ist dem mittleren Bild die die Class after
• und dem folgenden Bild die Class after + myrot.

<div class="image-mouseover">
  <img class="before alignnone" src="https://...jpg" alt="" width="113" height="150" />
  <img class="after alignnone" src="https://...jpg" alt="" width="113" height="150" />
  <img class="after myrot alignnone" src="https://...jpg" alt="" width="113" height="150" />
</div>

Noch mal Beispiel: Drei Bilder zur Animation. Erst das Flugzeug in original. Dem Zweiten ist der Propeller opak. – somit scheint der Propeller vom ersten Bild durch. Im Anschluss der Propeller allein. Der Dreien SVG jeweils ohne Hintergrund.

Anmerkung: Das CSS der Class image-mouseover ist das mit display: none; bedingend! Also wie es Tab 1 vorgestellt ist.

<div class="image-mouseover" style="float: right; margin: -30px 50px 0 0;">
  <img class="before alignnone" src="https://..OC-V-flugz-2-orig.svg" alt="" width="150" height="66" />
  <img class="after alignnone" style="margin-bottom: 2px;" src="https://..OC-V-flugz-2-propeller-ohne-opac80.svg" alt="" width="150" height="66" />
  <img class="after myrox" src="https://..OC-V-flugz-2-propeller-solo.svg" alt="" width="150" height="66" />
</div>

Dasselbe … und 🙂 Mouseover

So Spielerei

… im Zusammenspiel mit Plug-in Ditty:

Mouseover das Flugzeug …

Das Beispiel ist auch im anklicke von Button anzuwenden. Wie das so mit anklicke Button gemeint ist, siehe zum Beitrag Das Plug-in Easy FancyBox. "Und mit Klick hier so fliege auch in den Wolken!"

Nur Drehung von Bild:

… Das Tun für die Website 🖇

<img class="myrot aligncenter" src="https://../geek.svg" alt="geek" width="150" height="150" />

Ausgesuchtes: Drehende Icons: 10-Fache Drehung (3600 Grad, 10 secunden)

Beispiel:

img.myrotes {
  transition: transform 10s ease-out;
}

img.myrotes:hover {
  transform: rotate(3600deg);
}

<div class="boxerl-1"><img class="myrotes" src="https://../Clker-Free-Vector-Images-cd-bplaced-2.svg" alt="CD" width="300" height="300" /></div>

Anders der CD Lichtreflexe

So CD mit Lichtreflexe, die sind ja für sich gleichbleibend. Somit kann es besser sein, wenn der Text darüber gelegt und nur der sich dreht.

CSS Beispiel wie oben:

/* Container zentriert den Inhalt */
.boxerl-1 {
    display: flex;
    justify-content: center; /* Horizontal alignment */
    align-items: center; /* Vertical alignment */
    height: 300px;
}

/* Wrapper for the images to ensure they are displayed side by side */
.image-wrapper {
    display: flex;
    align-items: center; /* Align items vertically in the middle */
    gap: 20px; /* Optional: adds space between the images */
}

/* Specific styling for image margins */
.wp-image-203849,
.myrotes {
    margin: 0; /* Remove existing margins */
}

/* Container zentriert den Inhalt */
.boxerl-2 {
    display: flex;
    justify-content: center; /* Horizontal alignment */
    align-items: center; /* Vertical alignment */
    height: 300px;
}

/* Class: image-mouserl */
.image-mouserl {
    position: relative;
    width: 300px;
    height: 300px;
    display: block;
}

.image-mouserl .before {
    z-index: 1;
}

.image-mouserl .after {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

HTML Beispiel wie oben:

<div class="boxerl-1">
<div class="image-wrapper">

<img class="wp-image-203849" style="margin-top: 20px; margin-right: 30px; margin-left: 0px;" role="img" src="https://../cd-bplaced-solo-2.svg" alt="OpenIcons-cd-rom" width="200" height="200" /> <br />SVG von <a href="https://pixabay.com/de/vectors/cd-compact-disc-musik-lagerung-98417/" target="_blank" rel="noopener">OpenIcons</a>

<img class="myrotes alignnone" style="margin-top: -25px;" src="https://../bplaced-cd-uni-2-1.svg" alt="" width="200" height="200" />

</div>
</div>
So CD mit Lichtreflexe, die sind ja für sich gleichbleibend. Somit kann es besser sein, wenn der Text darüber gelegt und nur der sich dreht.
<div class="boxerl-2">
<div class="image-mouserl myrotes" data-hoverioaudio=""><img class="before alignnone" src="https://../cd-bplaced-solo-2.svg" alt="OpenIcons-cd-rom" width="300" height="300" />
<img class="after myrotes alignnone" src="https://../bplaced-cd-uni-2.svg" alt="" width="300" height="300" />
<audio>
<source src="https://../local-forecast-MP3-schnitt-clideo.com_.mp3" />
</audio></div>
</div>

Das zum Audio siehe
Tab 7: Das Audio mit Hover starten.

Hover-Effekt stylen mit @keyframes

Mit so @keyframes läuft auch das mit den Bildern über Stylesheet. Also die Pfade zu den Bilder mit Stylesheet von Drumherum sind im Customizer bzw. in der style.css einzutragen. Im HTML ist da nur die class der Animation.

<div class="animation"></div>

"Die Class dazu die Bilder im CSS bei den @keyframes."

← …Mouseover hier mal 

Siehe! – jsfiddle.net/.

Das ist zum Einstieg mit den @keyframes sehr hilfreich.

Das obige Beispiel mit den Jahreszeiten ist der Bildwechsel ab 0 % zu 33 % 66 % 100 %. Die animation-duration: 4s;, das ist die Zeitdauer der Animation im Gesamten.

So ist das CSS:

/* Animation Baum Jahreszeiten */
.animation {
  margin: 0;
  width: 180px;
  height: 180px;
  background-image: url(https://..kmicican-seasons-frühling.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.animation:hover {
  animation-name: bildwechsel;
  animation-duration: 4s;
  animation-delay: 0.5s;
  animation-timing-function: step-start;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes bildwechsel {
  0% {
    background-image: url(https://..kmicican-seasons-frühling.svg);
  }
  33% {
    background-image: url(https://../kmicican-seasons-sommer.svg);
  }
  66% {
    background-image: url(https://../kmicican-seasons-herbst.svg);
  }
  100% {
    background-image: url(https://../kmicican-seasons-winter.svg);
  }
}

Gleich mit mehr von Bildern der Bildwechsel mit 0 %, 20 % 35 % 50 % 65 % 80 % und 100 %. Mehr oder weniger Bildwechsel, wie 0 %, 14 % 28 % 42 % 56 % 70 % 85 % 100 %.

• Hinzuweisen ist da noch auf animation-iteration-count. Das ist dann so für die Wiederholungen. Usw. Und dort der Website ist das alles erst mal der li. Seitenleiste unter 'Eigenschaften' …

Im 'Mouseover' sollte das Bild am Ende stehen bleiben: Somit ist das für so Animation wie schon oben zu sehen und hier der Roboti.

Das letzte Bild bleibt so stehen, solang Mouseover. Da ist wieder die Seite animation-fill-mode. Relevant ist dort nun der Code animation-fill-mode: forwards;.

Siehe! – jsfiddle.net/. Dort ist das CSS auch.

• Die Animationen funken soweit auch mit Touch wie iPads und Handy. Aber so sehe auch im Titel
  mouse over, mouse move, mouse out…

Die Animation zum Ersten 'Mouseover' ruckelfrei? Des nächst ist so durchzulesen, aber ob von Erfolg, das bleibt dahingestellt.

Wenn man zum Ersten so @keyframes Animation im Mouseover, da ist das meist nicht ruckelfrei. Hierzu oben die Animation mit dem Bäumchen ist das evtl. nicht so aufgefallen, aber mit Browser Safari die Verzögerung sicher schon.

Eine andere Möglichkeit ist, die Animationsgeschwindigkeit anzupassen. Man kann zum Beispiel die Anzahl der Schritte im @keyframes-Block reduzieren oder eine längere Animationsdauer festlegen, um eine flüssigere Bewegung zu erzeugen.

Bilderanimation mit sanften Übergängen in CSS

Folgendes erscheint mir sehr gelungen!

Hier zeigt sich wie mehrere Bilder innerhalb eines Containers nacheinander sanft ein- und ausgeblendet werden.

HTML und CSS-Struktur

Beginnen wir mit der grundlegenden HTML-Struktur. Wir brauchen einen Container mit mehreren Bildern:

<div class="anim-baum">
<img class="img1" src="https://../kmicican-seasons-frühling-2.svg" alt="Frühling" />
<img class="img2" src="https://../kmicican-seasons-sommer-2.svg" alt="Sommer" />
<img class="img3" src="https://../kmicican-seasons-herbst-2.svg" alt="Herbst" />
<img class="img4" src="https://../kmicican-seasons-winter-2.svg" alt="Winter" />
</div>

/* Container-Stil für die Animation */
.anim-baum {
    position: relative;
    width: 360px;
    height: 360px;
    overflow: hidden; /* Verhindert, dass überlaufende Bilder sichtbar sind */
}

/* Stil für alle Bilder innerhalb des Containers */
.anim-baum img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Standardmäßig alle Bilder unsichtbar machen */
    transition: opacity 1s ease-in-out; /* Sanfter Übergang der Sichtbarkeit */
}

/* Sichtbarkeit des ersten Bildes standardmäßig */
.anim-baum .img1 {
    opacity: 1;
}

/* Animation beim Hover */
.anim-baum:hover .img1 {
    animation: fadeOut 8s forwards;
}

.anim-baum:hover .img2 {
    animation: fadeInOut 8s 1s forwards; /* Verzögerung für das Einblenden */
}

.anim-baum:hover .img3 {
    animation: fadeInOut 8s 4s forwards; /* Verzögerung für das Einblenden */
}

.anim-baum:hover .img4 {
    animation: stayVisible 8s 7s forwards; /* Verzögerung für das Einblenden und Sichtbar bleiben */
}

/* Keyframes für das Ein- und Ausblenden */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    87.5% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    12.5% {
        opacity: 1;
    }
    37.5% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    87.5% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* Sicherstellen, dass das letzte Bild sichtbar bleibt, wenn der Hover-Zustand aktiv ist */
@keyframes stayVisible {
    0% {
        opacity: 0;
    }
    12.5% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* Übergangsanimation für das erste Bild beim Verlassen des Hover-Zustands 
.anim-baum .img1 {
    transition: opacity 1s ease-in-out;
}

.anim-baum:hover .img4 {
    animation: stayVisible 8s 7s forwards;
}*/

• Container-Stil: Der .anim-baum-Container hat eine feste Größe von 360×360 Pixel und nutzt overflow: hidden, um sicherzustellen, dass überlaufende Bilder nicht sichtbar sind.
• Stil für alle Bilder: Alle Bilder innerhalb des Containers sind absolut positioniert und decken die gesamte Größe des Containers ab. Standardmäßig sind sie unsichtbar (opacity: 0) und haben einen sanften Übergangseffekt (transition: opacity 1s ease-in-out).
• Sichtbarkeit des ersten Bildes: Das erste Bild (.img1) ist standardmäßig sichtbar (opacity: 1).
• Animation beim Hover: Beim Hover über den Container wird eine Abfolge von Animationen ausgelöst:
  • .img1 verwendet die fadeOut-Animation, um langsam auszublenden.
  • .img2, .img3 und .img4 verwenden die fadeInOut-Animation mit unterschiedlichen Verzögerungen, um nacheinander ein- und auszublenden.
  • .img4 verwendet die stayVisible-Animation, um sichtbar zu bleiben.
• Keyframes:
  • fadeOut: Das Bild bleibt bis 87,5% der Animationsdauer sichtbar und blendet dann aus.
  • fadeInOut: Das Bild blendet bei 12,5% ein, bleibt bis 37,5% sichtbar und blendet dann wieder aus.
  • stayVisible: Das Bild blendet bei 12,5% ein und bleibt bis zum Ende sichtbar.

Des Letzteren ist nicht funktionell und haben wir daher auskommentiert:

• Übergangsanimation beim Verlassen des Hover-Zustands: Das erste Bild (.img1) hat eine Übergangsanimation, die sicherstellt, dass es sanft eingeblendet wird, wenn der Hover-Zustand verlassen wird.

Ein paar Einsichten zum Vorladen der Bilder

Mit Vorbehalt, wir haben bei der Vorladung meist keine Effizienz festgestellt.

Nächst Beispiel mit dem Roboti ist das aber augenfällig. So auszubügeln ist das mit Vorladen der Bilder in der header.php im <head>.

Bspw hier der drei Bilder zum Roboti:

<link rel="preload" href="/wp-content/uploads/../roboti.svg" as="image">
<link rel="preload" href="/wp-content/uploads/../roboti-soso.svg" as="image">
<link rel="preload" href="/wp-content/uploads/../roboti-maske.svg" as="image">

Browsern-Test:

• Chrome hat 'Teilweise Unterstützung', aber es funktioniert wie nicht!
• Zu Safari da steht 'Kompatibilität unbekannt', aber es funktioniert! – und hier ist das Vorladen schon die Bedingung, dass die Animation annehmbar ist.
• Feuerfuchs 'Volle Unterstützung' und ist okay!

Nun, dass es auch zur Funktion im Chrome, so bedarf es nochmal von Codes. Damit dient das als "Fallback" für nicht unterstützte Browser:

<link rel="stylesheet" href="style.css">

Bemerkung: Allein des gewohnten Codes von <link rel="stylesheet" href="style.css"> ist das weder in Chrome noch in Feuerfuchs funktionell. Im bspw Safari genügte das!

Also dem Beispiel hier der Code für die header.php im <head>. Sowohl des Codes zur style.css als auch die Preloads der Bilder:

<link rel="stylesheet" href="style.css"> 
<link rel="preload" href="/wp-content/uploads/../roboti.svg" as="image"> 
<link rel="preload" href="/wp-content/uploads/../roboti-soso.svg" as="image"> 
<link rel="preload" href="/wp-content/uploads/../roboti-maske.svg" as="image">

Childs Theme Preload: Für Freunde, welche Childs Theme mit wp_enqueue_style in der functions.php wird die CSS-Datei bereits korrekt von WordPress eingebunden. Also statt <link rel="stylesheet" href="style.css"> reicht dann folgender Preload im Head-Bereich:

<link rel="preload" href="<?php echo esc_url( get_stylesheet_directory_uri() . '/style.css' ); ?>" as="style">

Browser Chrome: Soundso ist mit Browser 'Chrome' die Zeit von ca. 4 sec. zu gewähren. Mal so mal so läuft es nicht rund.

Die Nachlese: Vorladen von Inhalten mit rel = "Preload" und da
VORLADEN, VORRENDERN & NACHLADEN

Das nun Folgende funktioniert nicht so gut, eigentlich gar nicht! Da somit die Bilder der Animation im Ganzen ausgeblendet werden und der Fehler ist, dass das auch verbleibt. Also im TEST mit Browser Chrome, Safari und Feuerfuchs. So ist dahingestellt als Merkzettel:

<div class="container slides">
<div class="animation2"></div>
</div>

.slides {
  background: url("https://..roboti-maske.svg") no-repeat -9999px -9999px,
    url("https://..roboti-soso.svg") no-repeat -9999px -9999px,
    url("https://..roboti.svg") no-repeat -9999px -9999px;
  animation: images 9s linear 0s infinite alternate;
}

Ein Bild beim Mouseover einblenden und beim Anklicken durch ein anderes ersetzen

Ähnlich wie hier beim Widget 'Suche' in der Mitte der Seitenleiste, welches nur im Normalmosus (siehe der Headerzeile: D·e·s·k L E S E M O D U S / VS.) zu sehen ist.

Im Anlauf das Search Widget designen.

Mit dem CSS u. HTML s. Tab 1:

<img class="wp-image-197933" src="https://..Widgest-Suche.png" alt="Widgest-Suche" width="300" height="144" />
<p>Das Bild als Double</p>
<div class="image-mouseover">
    <img class="before alignnone" style="margin-top: -155px; margin-left: 170px;" src="https://..acharyaniraj1999-die-ameise-2.png" alt="image" width="125" height="120" />
    <img class="after alignnone" style="margin-top: -88px; margin-left: 170px;" title="… Hurra da bin ich!" src="https://..acharyaniraj1999-die-ameise.svg" alt="image" width="125" height="120" />
</div>

Ganz anders und sehr anspruchsvoll ist das im Folgenden: Ein Bild durch Mouseover einblenden und im Anklicke dann das andere. Dazu bitte ich dich hier das im Direkten im Widget 'Suche' re. Seitenleiste. (Du bist im Lesemodus, also solltest du erst den Switch in der oberen Leiste drücken, um das Beispiel zu sehen.)

.widget .search-field {
  background-image: url(https://..acharyaniraj1999-die-ameise-2.png);
  background-size: auto 70%;
  background-repeat: no-repeat;
  background-position: 130% 140%;
  transition: 0.2s;
}

.widget .search-field:hover {
  background-position: 70% 140%;
  opacity: 1;
}

.widget .search-field:focus,
.widget .search-field:active {
  background-position: 60% 140%;
  background-image: url(https://..acharyaniraj1999-die-ameise.svg);
}

^{Mein Dank wieder mal an Internet-Freund.}

Merkzettel:

• background-size: auto 70%; die Eigenschaft und dem Wert definiert die Größe eines Hintergrundbildes. Die sind komplett festzulegen oder nur teilweise, um so das eigentliche Seitenverhältnis zu erhalten.
• background-repeat: no-repeat; die Eigenschaft und infolge der Wert bestimmt, ob und wie Hintergrundbilder wiederholt werden.
• background-position: 130% 140%; die Eigenschaft mit Wert bestimmt die Position des Hintergrundbildes.
• transition: 0.2s; die Eigenschaft ist eine Kurzschreibweise für 'transition-property', 'transition-duration', 'transition-timing-function' und 'transition-delay'.
• opacity: 1; Die CSS Eigenschaft gibt die Transparenz eines Elements an, d. h. den Grad, zu welchem der Hintergrund des Elements überlagert wird.

^{https://developer.mozilla.org/de/}

Worauf bei SVG-Bildern zu achten ist

Bei der Verwendung von SVG-Bildern sollte auf den Hintergrund geachtet werden.

Das erste SVG-Bild ist sichtbar, während das zweite nicht sichtbar ist. Das zweite SVG-Bild sollte normalerweise einen Hintergrund haben, da sonst das erste Bild auch sichtbar ist. Das kann man am Beispiel des Apfellogos sehen, bei dem die beiden SVG-Bilder fast identisch sind. Das zweite SVG-Bild hat jedoch keinen Hintergrund, und der Unterschied zwischen den Bildern ist nicht so groß.

Für das Bild mit Hintergrund, das der class="after" zugeordnet ist, kann man E. g. den Boxy-SVG-Editor verwenden. Hier kann man beispielsweise ein Rechteck über das Bild legen, die Farbe dem Hintergrund anpassen und das Rechteck dann in den Hintergrund legen.

Das Beispiel ist CSS wie in der Einführung hier ganz oben der Website, also mit .image-mouseover …

Hinweis zur Bildbeschriftung: Das Bild ist wie gehabt zu beschriften.

• Allerdings funktioniert das in dem 'Text Widget' nicht mit dem 'Individuelles HTML' Widget. Auch wenn man den Code vom 'Text' Widget in das 'Individuelles HTML' Widget kopiert, wird die Bildbeschriftung nicht angezeigt.
• Das width-Attribut ist zu definieren, z.B. wie folgt: alt='image' width="170" height="150" />. Dies ist auch für das [caption id='' align='alignnone' width="170"]-Tag relevant. Ohne den Attributwert oder mit width="auto" wird die Bildbeschriftung nicht angezeigt oder gelöscht.

Das Audio mit Hover starten! – mit JavaScript

Es stimmt, dass Hintergrundmusik beim Besuch einer Website oft unerwünscht oder unpassend ist. Bei rein musikalischen Websites kann dies jedoch gut ankommen, wie zum Beispiel bei SOUNDCLOUD. Allerdings treten dabei häufig Fehlermeldungen in der Konsole auf, was die Seite jedoch in Kauf nimmt, um die Besucher mit Musik zu empfangen.

• Die Browser-Sicherheitsfunktion verhindert, dass Medien (Audio oder Video) automatisch abgespielt werden, ohne dass der Benutzer zuvor mit der Seite interagiert hat. Dies dient dazu, unerwünschtes Autoplay von Medien zu verhindern, insbesondere in Fällen, in denen der Benutzer keine direkte Aktion wie Klicken oder Tippen ausgeführt hat.

Anders ist das hier im Mouseover, und das sollte nur dann erfolgen, sobald der Benutzer mit der Seite interagiert (Klick, Tastendruck oder Berührung). Erst nach dieser Interaktion wird das Audio mit Mouseover abgespielt und somit welche Fehlermeldungen (Uncaught (in promise) NotAllowedError: play() failed because the user didn’t interact with the document first. https://goo.gl/xX8pDD" folgt dem JS des teils '$(this).find("audio")[0].play();) nicht auftreten.

• Im Esten Beispiel (data-hoveraudio) ist bei Mouseover das Audio an. Dann beim abgehen vom Hover das Audio aus. Bei erneutem Mouseover ist der Neustart.
• Im Zweiten Beispiel (data-hoverioaudio) läuft das Lied so lange, bis es zu Ende ist. Bei erneutem Mouseover ist der Neustart.

Hier ist das JavaScript in modernisierter Form (Vanilla JavaScript: jQuery wurde vollständig durch native JavaScript-Funktionen ersetzt):

/* 
* data-hoveraudio = Audio stoppt beim Verlassen, startet neu bei erneutem Hover.
* data-hoverioaudio = Hover Audio wird in voller Länge abgespielt.
*/
(function() {
    "use strict";

    // Überwacht, ob der Benutzer eine Interaktion ausgeführt hat
    let userInteracted = false;

    // Event-Listener für Benutzerinteraktionen (Klick, Tastendruck oder Berührung)
    document.addEventListener('click', () => userInteracted = true);
    document.addEventListener('keydown', () => userInteracted = true);
    document.addEventListener('touchstart', () => userInteracted = true);

    var WegerlHoverAudio = {
        init: function() {
            this.initHoverAudio();  // Initialisiert die Funktion für [data-hoveraudio]
            this.initHoverIoAudio(); // Initialisiert die Funktion für [data-hoverioaudio]
        },

        initHoverAudio: function() {
            // Überprüft, ob es Elemente mit dem Attribut [data-hoveraudio] gibt
            const hoverAudioElements = document.querySelectorAll("[data-hoveraudio]");
            if (!hoverAudioElements.length) {
                return; // Wenn keine gefunden werden, wird die Funktion beendet
            }

            // Für jedes Element mit [data-hoveraudio]
            hoverAudioElements.forEach(el => {
                const audio = el.querySelector("audio"); // Sucht das Audio-Element innerhalb des aktuellen Elements

                // Fügt einen Event-Listener für mouseenter hinzu
                el.addEventListener("mouseenter", function() {
                    if (userInteracted) { // Überprüft, ob der Benutzer zuvor interagiert hat
                        audio.play().catch(error => {
                            console.error("Audio play error: ", error); // Fehlermeldung bei Abspielproblemen
                        });
                    }
                });

                // Fügt einen Event-Listener für mouseleave hinzu
                el.addEventListener("mouseleave", function() {
                    audio.load(); // Lädt das Audio neu, wenn der Benutzer den Hover-Bereich verlässt
                });
            });
        },

        initHoverIoAudio: function() {
            // Überprüft, ob es Elemente mit dem Attribut [data-hoverioaudio] gibt
            const hoverIoAudioElements = document.querySelectorAll("[data-hoverioaudio]");
            if (!hoverIoAudioElements.length) {
                return; // Wenn keine gefunden werden, wird die Funktion beendet
            }

            // Für jedes Element mit [data-hoverioaudio]
            hoverIoAudioElements.forEach(el => {
                const audio = el.querySelector("audio"); // Sucht das Audio-Element innerhalb des aktuellen Elements

                // Fügt einen Event-Listener für mouseenter hinzu
                el.addEventListener("mouseenter", function() {
                    if (userInteracted) { // Überprüft, ob der Benutzer zuvor interagiert hat
                        audio.play().catch(error => {
                            console.error("Audio play error: ", error); // Fehlermeldung bei Abspielproblemen
                        });
                    }
                });
                // Beachte: Es gibt keinen mouseleave-Listener, daher wird das Audio nicht gestoppt
            });
        },
    };

    // Initialisiert die Hover-Audio-Funktionen, sobald der DOM geladen ist
    document.addEventListener("DOMContentLoaded", function() {
        WegerlHoverAudio.init();
    });

})();

/* - Ende: data-hoveraudio und data-hoverioaudio Funktionen - */

^{Pr. WP-Freund}

Wenn du das Child Theme nicht mit der JS-Datei hast, kannst du es auch mit der Funktion in der fuctions.php benutzen. Dann klick an …

// Legt das Script in den Footer der Website, damit es nur einmal aufgerufen wird.
add_action('wp_footer', function() { 
    ?>
    <script>
        // Hier das JS einfügen.
    </script>
    <?php 
});

Beispiel data-hoveraudio=""

Im Ersten siehe! – jsfiddle.net/ (voriger, veralteter Code).

• Mit Abspeichern des JavaScript ist der Website ein neues Attribut dabei, data-hoveraudio="". Folglich im HTML data-hoveraudio="":

<div class="hoverbild" data-hoveraudio="">
    <img src="https://...jpg" />
    <audio>
        <source src="https://...mp3" />
    </audio>
</div>

Zu beachten ist …

Im Folgenden das Attribut data-hoveraudio="" und das Start-Tag <audio>. Wenn die Maus das Bild berührt, wird das Audio auf play() gesetzt. Gehst du mir der Maus da weg, dann wird der Player neugeladen und so zurückgesetzt.

Wenn denn so class-Attribut mit so Wert hoverbild dabei ist, so ist dann das Attribut data-hoveraudio="". Also wie <div class="hoverbild" data-hoveraudio="">. Sonst so ohne class heißt das HTML <div data-hoveraudio=""> und das Audio funktioniert. Das zeigt sich da im Text ist Musik!

<div data-hoveraudio="">
    → Im Text ist Musik! ←
    <audio>
        <source src="https://../Remix-online-audio-converter.com.mp3" />
    </audio>
</div>

Und das funktioniert für so Kombinationen:

<div class="image-mouseover" data-hoveraudio="">

<div class="image-mouseover" style="margin-left: 90px;" data-hoveraudio="">
    <img class="before alignnone" src="https://../unDraw-happy_music-frei.svg" alt="image" width="250" height="250" />
    <img class="after alignnone" title="… happy musik!" src="https://../unDraw-happy_music-frei3a.svg" alt="image" width="250" height="250" />
    <audio>
        <source src="https://../Turdus_merula_Co0020_02_short.mp3" />
    </audio>
</div>

SVG unDraw illustrations var.
Audio s. im Tierstimmenarchiv
Sound ⊕ Mouseover ↓.

Beispiel data-hoverioaudio=""

Im Zweiten siehe! – jsfiddle.net/ (voriger, veralteter Code).

Im Zweiten ist auch durch Mouseover der Play-Button an. Da läuft das Lied so lange, bis es zu Ende ist (das sind hier so 15 sec.) und startet erst wieder durch Mouseover.

Dies ist nur für so kurze Musiksequenzen, da ja der Besucher das so nicht selbst abstellen kann. Aber so was ist eben Geschmacksache auch. Hingegen bei so Musik ist es immer so viel schöner auszuklingen, als es durch abgehen vom Hover so abgehackt ist. Und im potenziell den "Ton aus" ist jedem Gerät.

Folgend das, was im Ersten ist und dazu das im Zweiten braucht es eine Anpassung. Von hoveraudio zu  hoverioaudio. Also sind da die Attributte hoveraudio und hoverioaudio auseinanderzuhalten.

… so auch im HTML mit dazu der Class myrotes (siehe welches im Tab vier besprochen wurde).

<div data-hoverioaudio="">
    <img class="myrotes alignnone" src="https://../Clker-Free-Vector-Images-cd.svg" alt="" width="200" height="200" />
    <audio>
        <source src="https://../local-forecast_EratENYy.mp3" />
    </audio>
</div>

Das Audio und die Browser

Um Audio abzuspielen, muss der Browser des Besuchers dies zulassen. Bei den meisten Browsern ist es nicht standardmäßig so eingestellt, dass das Audio automatisch abgespielt wird, wenn der Mauszeiger darüber bewegt wird. In den meisten Fällen muss der Besucher zunächst auf die Website klicken, bevor das Audio abgespielt wird.

Automatisches Abspielen von Audio und Probleme mit DOMContentLoaded

Beim Versuch, Audio automatisch abzuspielen, stoßen wir auf eine Herausforderung, die moderne Browser für eine verbesserte Benutzererfahrung implementiert haben. Viele Browser blockieren automatisches Abspielen von Audio ohne Nutzerinteraktion, um unerwünschte Störungen zu verhindern. Der übliche Ansatz, document.addEventListener('DOMContentLoaded', function ()) zu verwenden, kann in solchen Fällen Einschränkungen mit sich bringen.

Mouseover-Effekt und Unsicherheiten

Ebenso kann das Abspielen von Audio beim Hovern (Mouseover) zu Unsicherheiten führen. Moderne Browser setzen Restriktionen ein, um Benutzer vor unerwartetem Audio-Feedback zu schützen. Daher ist das automatische Starten von Audio durch Hovern nicht zuverlässig und erfordert eine Benutzerinteraktion, z.B. durch Klicken.

Hinweis für Entwickler: Es ist wichtig, die Einschränkungen und Verhaltensweisen verschiedener Browser zu berücksichtigen und alternative Methoden zu verwenden, um Audio-Features konsistent und benutzerfreundlich zu gestalten. Beachte dies insbesondere bei der Implementierung von Funktionen, die Nutzererfahrung und Barrierefreiheit beeinflussen können. Die Entwicklerkonsole (DevTools) in den Browsern kann dabei hilfreich sein, um mögliche Fehler oder Einschränkungen zu identifizieren.

In Safari ist zu beachten, dass das Audio standardmäßig nicht abgespielt wird. Hier kann der Besucher in den Einstellungen des Browsers die entsprechende Option aktivieren, um das Audio abzuspielen. Nach dieser Einstellung wird das Audio auch in Safari automatisch abgespielt, ohne dass der Besucher zuvor auf die Website klicken muss.

Browser Chrome: Einstellungen → Datenschutz und Sicherheit → Zusätzliche Inhaltseinstellungen → …

Browser Firefox: Einstellungen → Datenschutz und Sicherheit → Automatische Wiedergabe → …

Browser Safari: Einstellungen → Websites → Automatische Wiedergabe → …

Interaktion SVG-Bild und Ditty News Ticker

…wie Eingangs des Beitrags das Flugzeug in Interaktion mit Plug-in ⇔ Ditty News Ticker.

Anders ist das hier welches der HAUPTSEITE wegerl.at Seitenleiste rechts zu sehen ist. Folglich hier im Titel SVG-Bild im Zusammenspiel mit Ditty News Ticker.

Zuerst möchte man da so das Widget 'Ditty News Ticker' nutzen und darunter das 'Text-Widget' mit dem SVG-Bild. So, dass dann das Bild mit margin-top hinter den Ticker ist.

Das funkt mal ganz lapidar zu sagen, – doch ob im Erstaufruf auch im Weiter der Website hüpft sich das Bild erst mal zurecht. Somit Browsers rendern wird das lästig. Nein, so passt das nicht! – darum ist hier das Bild als background-image.

.handy {
  background-image: url("https://../Clker-Free-Vector-Images-mobil-6px.svg");
  background-repeat: no-repeat;
  margin: 0 50px;
  width: 125px;
  height: 200px;
}

… Oder zentriert:

.laptop {
  background-image: url("https://../Clker-Free-Vector-Images-laptop-dot-10px.svg");
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  height: 170px;
  width: 218px;
}

Merke: so Vorlagen sind. … Doch selbst bleibt das fluchten.

HTML: <div class="handy">[ditty_news_ticker id="321"]</div>