Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[quinti]

Hallo #zsmmn,
ich habe 2 bilder übereinander gelegt und die Sichtbarkeit an einen Datenpunkt geknüpft der autoamtisch alle 10 Sekunden wechselt.
Gibt es eine Möglichkeit die beiden Bilder zu faden? Vielleicht sogar ein crossfade ?
Müsste doch iwie mit CSS und opacity machbar sein. bin leider nicht so der CSS freak ;)

[MCU]

@quinti
Beispiel mit HTML Widget

src muss man anpassen und skript hinzufügen

<div id="fadebox" class="fade-container">
  <img src="https://192.168.178.170/download/bilder/ffn.png" class="fade-img img1 active">
  <img src="https://192.168.178.170/download/bilder/NDR2.png" class="fade-img img2">
</div>

<style>
#fadebox {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#fadebox img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease-in-out; /* Dauer = 1 Sekunde */
}

#fadebox img.active {
  opacity: 1;
}
</style>

let state = 0;
setInterval(() => {
  state = 1 - state; // toggle 0/1
  document.querySelector(".img1").classList.toggle("active", state === 0);
  document.querySelector(".img2").classList.toggle("active", state === 1);
}, 4000); // alle 10 Sekunden