Werkzeuge zum Rollover-Image Block
Rollover Image - Bildwechsel oder Text bei Hover - von Tommy
Version vom 03.06.2026
> Hauptbild über Blockwerkzeuge auswählbar
> Rollover-Bild oder Text über Blockwerkzeuge auswählbar
> Fade-, Zoom- und Slide-Effekt für Bild und Text wählbar
> Übergangszeit für Bild und Text einstellbar
> Bild links oder rechts im Block wählbar
> Kein Broken-Image-Symbol mehr
> SVG-Platzhalter bei fehlenden Bildern
> Abgerundete Bildecken wählbar
> Abgerundete Hintergrundecken wählbar
> Touch-Geräte werden berücksichtigt
> Saubere CSS-Lösung ohne JavaScript
> Beliebig oft als Block wiederverwendbar
Aktuelle Version: 03.06.2026 7:00 Uhr
Diese Block‑Erweiterung könnt ihr nach dem Herunterladen der .mbrext‑Datei über den oberen Download‑Button direkt in Mobirise importieren.
Um eure Wechselbilder zu verwenden, klickt bitte in den Blockwerkzeugen auf das jeweilige Miniaturbild und wählt ein Bild aus dem Mobirise Bild-Editor.
Ihr könnt für den Bildwechsel bei Hover drei unterschiedliche Effekte wählen:
> Fade > Zoom > Slide
sowie auch die Geschwindigkeit einstellen.
Alle Einstellungen der Block‑Werkzeuge erfolgen mittels CSS und wirken sich unmittelbar auf die Arbeitsoberfläche von Mobirise aus, wo sie direkt angewendet werden können.
Wenn ein Text‑Rollover verwendet wird, muss zusätzlich ein Rollover‑Image ausgewählt werden, da sonst beim Publizieren eine Fehlermeldung auftritt. Das Textfeld kann mit oder ohne Hintergrundfarbe angezeigt werden. Die Deckkraft der Hintergrundfarbe ist einstellbar. Es lässt sich über die X-/Y‑Koordinaten positionieren und mit abgerundeten Ecken versehen. Der Hover-Effekt ist beim Text ebenfalls mit den oben genannten drei Effekten einstellbar.
In den Block‑Werkzeugen habe ich optionale, abgerundete Ecken verwendet.
In den Blockwerkzeugen könnt ihr als Hintergrund eine Farbe, ein Bild oder ein Video auswählen. Bitte vergesst nicht, bei der Auswahl eines Videos auch ein Fallback-Bild festzulegen, sonst tritt beim Veröffentlichen eine Fehlermeldung auf.
Außerdem könnt ihr das Bild wie jetzt im linken Blockbereich anzeigen oder per Auswahl im rechten Blockbereich. Am Smartphone bleibt das Bild immer oben.
Werkzeuge zum Rollover-Image Block
Version vom 31.05.2026
Hier als Beispiel mit dem Hover-Effekt "Slide" und dem Bild auf der rechten Seite vom Block, sowie einem Video-Hintergrund.
Version vom 03.06.2026
Alternativ steht ein Text‑Rollover zur Verfügung.
Um Fehler beim Publizieren zu vermeiden wählt auch das Rollover-Bild, auch wenn ihr als Rollover (wie hier) einen Text verwendet.
Ihr könnt diesen Text mit oder ohne Hintergrundfarbe verwenden und wie gewohnt in Mobirise bearbeiten, also auch verlinken. Sowohl die Position des Textfeldes als auch die Deckkraft der Hintergrundfarbe sind einstellbar.
Tipp: Text-Rollover lässt sich mit dem Hover-Effekt "Fade" leichter bearbeiten als zum Beispiel im Effekt "Slide".
Hier habe ich noch zusätzlich eine Border an der Box angebracht:
.hover-text-box {
border: 1px solid rgba(255, 255, 255, 0.8);
}