Mouseover-Effekte für Ihre Bilder erstellen

Verbessere Bilder und fessle die Aufmerksamkeit eines Besuchers, indem du Mouseover-Effekte anwendest.

Zuletzt aktualisiert: 22. Dezember 2024

Mouseover-Effekte zeigen Informationen an oder erzeugen Bewegungen, wenn du deinen Mauszeiger über ein Bild bewegst. Dies fügt deiner Website eine subtile Interaktions- und Animationsebene hinzu und kann eine großartige Möglichkeit sein, Titel und Beschriftungen zu enthüllen, ohne ein Bild zu verdecken oder zusätzlichen Platz auf einer Seite einzunehmen.

Du kannst Mouseover-Effekte auf jeder Website mit Bild-Blöcken und Slideshow-Galerie-Blöcken verwenden. Je nach Version und Template deiner Website unterstützt deine Seite möglicherweise auch Mouseover-Effekte in anderen Bereichen. Diese Anleitung erklärt jeden Bereich im Detail.

Tipp

Die meisten Mobilgeräte unterstützen keine Mouseover-Effekte. Daher kann die Erfahrung deiner Besucher je nach Gerät variieren, wenn sie deine Website besuchen.

Bild-Blöcke

So erlangst du Zugriff auf diese Funktion

Bild-Blöcke, die zu Abschnitten des Kreativen Editors hinzugefügt wurden, unterstützen keine Mouseover-Effekte oder integrierte Beschriftungen. Erstelle Beschriftungen, indem du mithilfe eines Text-Blocks Text hinzufügst, der an einen Bild-Block angrenzt oder diesen überlagert.

Du kannst eine Bildbeschriftung beim Mouseover in Inline-Bild-Blöcken anzeigen.

  1. Fügen Sie einen neuen Bild-Block hinzu oder öffnen Sie einen bestehenden.
  2. Klicke auf den Tab Design und wähle Inline aus.
  3. Klicke auf den Tab Inhalt und wähle im Drop-down-Menü Beschriftung die Option Beschriftungs-Overlay bei Mouseover aus.
  4. Bewege den Mauszeiger über den Bild-Block. Klicke in dem daraufhin angezeigten schwarzen Beschriftungs-Overlay auf Hier eine Beschriftung schreiben ... und gib deine Beschriftung ein.
  5. Nach dem Speichern der Seite erscheint die Beschriftung beim Mouseover. Verwende Stil-Anpassungen, um die Bildbeschriftung zu gestalten.

Slideshow-Galerie-Block

Sie können Bildtitel und Beschreibungen beim Mouseover in einem Slideshow-Galerie-Block anzeigen.

  • Mouseover-Effekte sind nur im Design Slideshow-Galerie-Block verfügbar.
  • Titel und Beschreibungen werden auf Mobilgeräten, die kleiner als 480 Pixel sind, nicht angezeigt.
  • Beschriftungen, die so eingestellt sind, dass sie bei Mouseover angezeigt werden, können auf größeren Geräten, wie beispielsweise Tablets, oder bei kleineren Geräten im Querformat angezeigt werden. Die Beschriftungen werden entweder immer angezeigt oder erscheinen beim Antippen oder langem Drücken, je nach Mobilgerät.

So fügst du Text hinzu und aktivierst Mouseover-Effekte:

  1. Füge einen neuen Slideshow-Galerie-Block hinzu oder öffne einen bestehenden.
  2. Bewege den Mauszeiger im Tab Inhalt über ein Bild und klicke auf the-gear-icon.
  3. Gib einen Titel und eine Beschreibung ein. Du kannst auch eine optionale Klick-URL hinzufügen. 
  4. Klicken Sie auf Speichern.
  5. Klicke auf den Tab Design.
  6. Aktiviere Titel und Beschreibung anzeigen.
  7. Wähle eine Position aus dem Drop-down-Menü Position von Titel und Beschreibung aus.
  8. Klicke auf Bei Mouseover anzeigen.
  9. Klicke auf Anwenden.

Portfolio-Seiten

Einige Portfolio-Seiten-Layouts unterstützen Mouseover-Effekte. Wähle im Portfolio-Seiten-Editor eines der folgenden Layouts aus:

  • Mouseover: Hintergrund – Zeigt die Titel des Projekts in einem Stapel- oder Inline-Layout an. Wenn du mit der Maus als Mouseover über einen Titel fährst, ersetzt das ausgewählte Bild des Projekts den Abschnittshintergrund.
  • Mouseover: fixiert – Zeigt die Seitentitel des Projekts in einem Stapel- oder Inline-Layout an. Wenn du mit der Maus als Mouseover über einen Titel fährst, wird das ausgewählte Bild des Projekts kleiner in einer fixierten Position des Abschnitts angezeigt.
  • Mouseover: Cursor folgen – Zeigt die Titel des Projekts in einem Stapel- oder Inline-Layout an. Wenn du mit der Maus als Mouseover über einen Titel fährst, wird das ausgewählte Bild des Projekts kleiner und in einer Position, die der Bewegung des Cursors folgt, angezeigt. 

Um mehr zu erfahren, gehe zu Portfolio-Seiten

Shop-Seiten

Mouseover-Effekte funktionieren je nach Version deiner Website unterschiedlich. 

Wenn ein Produkt mehr als ein Bild hat, zeigt die Shop-Seite beim Mouseover ein alternatives Produktbild an. Weitere Informationen findest du unter Shop-Seiten gestalten

Wie Mouseover-Effekte angezeigt werden, hängt vom Shop-Seitentyp deiner Template-Gruppe ab:

Galerie-Seiten (Version 7.0)

Einige Vorlagen unterstützen Mouseover-Effekte für Galerie-Seiten. Du kannst diese Effekte mithilfe von „Website-Stil“ aktivieren und anpassen.

Bildtitel und -beschreibungen werden bei Mouseover für Slideshow- und Raster-Designs in folgenden Template-Gruppen angezeigt:

  • Adirondack
  • Aviator
  • Bedford
  • Brine
  • Farro
  • Five
  • Galapagos
  • Native
  • Pacific
  • Skye
  • York

Den Mouseover-Effekt aktivieren und anpassen

Öffne auf der Galerie-Seite „Website-Stil“ und scrolle nach unten zu Galerie-Stile. Klicke auf Galerie-Design: und wähle Slideshow oder Raster aus. 

  • Slideshow – Wähle Bei Mouseover anzeigen aus dem Drop-down-Menü Galerie-Info-Overlay aus. Titel und Beschreibungen werden bei Mouseover angezeigt. Beschriftungen, die so eingestellt sind, dass sie bei Mouseover angezeigt werden, werden auf größeren Mobilgeräten wie beispielsweise Tablets oder auf kleineren Geräten möglicherweise im Querformat angezeigt. Die Beschriftungen werden entweder immer angezeigt oder erscheinen beim Antippen oder langem Drücken, je nach Mobilgerät.
  • Raster – Titel und Beschreibungen werden beim Mouseover angezeigt, wenn das Bild in einer Lightbox geöffnet wird, es sei denn, das Bild hat eine Klick-URL. Weitere Informationen findest du unter Bilder zum Öffnen in einer Lightbox einrichten.

Weitere Galerie-Seiten-Effekte nach Template

Galerieseiten haben in diesen Template-Gruppen spezielle Mouseover-Effekte:

  • Forte – Wenn du mit der Maus über das Karussell der Galerie-Seite fährst, werden Navigationspfeile angezeigt. Wenn du mit der Maus über eine Beschriftung fährst, wird diese nach oben verschoben, sodass du längere Beschreibungen lesen kannst.
  • Momentum – Pfeiltastennavigation bei Mouseover im Vollbildmodus.
  • Tremont – Beschriftungen bei Mouseover anzeigen.
  • Wexley – Wenn du mit der Maus über Bilder auf einer Galerie-Seite fährst, werden der Bildtitel und ein Farb-Overlay angezeigt.

Index-Seiten (Version 7.0)

Index-Seiten haben in diesen Template-Gruppen spezielle Mouseover-Effekte:

  • Avenue – Wenn du mit der Maus über ein Vorschaubild fährst, ändert sich dessen Deckkraft. Du kannst auch den Navigationstitel der Seite beim Mouseover anzeigen.
  • Flatiron – Wenn du mit der Maus über ein Vorschaubild fährst, wird das Bild vergrößert und die Ansicht schwenkt darüber.
  • Montauk – Wenn du mit der Maus über ein Vorschaubild fährst, ändert sich dessen Deckkraft.
  • Tremont – Wenn du in der Index-Navigation mit der Maus über einen Seitentitel fährst, erscheint das ausgewählte Bild der Seite als Hintergrundbild.
  • York – Vorschaubilder können beim Mouseover verblassen und Vorschaubild-Titel können beim Mouseover angezeigt werden.

Zusätzliche Hilfestellungen finden Sie in den entsprechenden Template-Anleitungen.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.