TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Perspektivischen Bild-Hover-Effekt in Weebly hinzufügen

1

Sie verwenden möglicherweise viele Bilder auf Ihrer Weebly-Site, wollten den Benutzern jedoch nur wichtige Bilder auf unterschiedliche Weise hervorheben, um sie anzuziehen. Sie können beispielsweise eine Präsentations-Portfolioseite erstellen und die Bilder Ihrer Arbeit an Projekten, Fotografien, Videos usw. anzeigen. Das Hinzufügen eines perspektivischen Hover-Effekts zu solchen Portfoliobildern erregt die Aufmerksamkeit des Benutzers und verbessert das Engagement. In diesem Artikel zeigen wir, wie Sie Bildern auf Ihrer Weebly-Site einen perspektivischen Schwebeeffekt hinzufügen. Unten sehen Sie ein Beispiel für das Bild mit Schwebeeffekt und bewegen Sie die Maus über das Bild, um den perspektivischen Schwebeeffekt zu sehen.

Wie füge ich einem Bild einen perspektivischen Schwebeeffekt hinzu?

Der Prozess besteht aus drei einfachen Schritten:

  • Bild auf Ihre Weebly-Site hochladen
  • CSS-Code hinzufügen
  • HTML-Code hinzufügen

Schritt 1 – Hochladen eines Bildes

Melden Sie sich bei Ihrem Weebly-Konto an, wählen Sie die Website aus, die Sie bearbeiten möchten, und navigieren Sie zu „Design > HTML / CSS bearbeiten”. Klicken Sie auf die Schaltfläche + neben "Assets" und wählen Sie dann die Option "Datei(en) hochladen". Laden Sie das Bild hoch, dem Sie den Hover-Effekt hinzufügen möchten. Weitere Informationen zum Bearbeiten von Quell-CSS der Weebly-Site.

Perspektivischen Bild-Hover-Effekt in Weebly hinzufügen

Datei auf der Weebly-Site hochladen

Die URL des hochgeladenen Bildes sollte wie folgt lauten – „ http://yoursitename.weebly.com/files/theme/image-name.jpg “. Ersetzen Sie den Site- und Bildnamen durch Ihren in der URL.

Schritt 2 – Hinzufügen von CSS-Code für den Hover-Effekt

Fügen Sie den folgenden CSS-Code unter "Seiten > Seite auswählen > Erweiterte Einstellungen > Kopfzeilencode" hinzu. Ersetzen Sie die Bild-URL durch die eigene Bild-URL aus Schritt 1.

<style type="text/css"> .thumb { width: 400px; height: 300px; margin: 70px auto; perspective: 1000px; } .thumb a { display: block; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88087-6131f5c007508.jpg"); background-size: 0, cover; transform-style: preserve-3d; transition: all 0.5s; } .thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;} .thumb a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 36px; background: inherit; background-size: cover, cover; background-position: bottom; transform: rotateX(90deg); transform-origin: bottom; } .thumb a span { color: white; text-transform: uppercase; position: absolute; top: 100%; left: 0; width: 100%; font: bold 12px/36px Montserrat; text-align: center; transform: rotateX(-89.99deg); transform-origin: top; z-index: 1; } .thumb a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); transition: all 0.5s; opacity: 0.15; transform: rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin: bottom; } .thumb:hover a:before { opacity: 1; box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); transform: rotateX(0) translateZ(-60px) scale(0.85); } </style>

Schritt 3 – HTML hinzufügen

Der letzte Schritt besteht darin, den folgenden Code im Inhaltsbereich innerhalb eines "Embed Code"-Elements hinzuzufügen.

<div class="thumb"> <a href="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88087-6131f5c007508.jpg"> <span>KungFu Panda</span> </a> </div>

Das Bild ist im Weebly-Editor möglicherweise nicht sichtbar. Veröffentlichen Sie Ihre Site und bewegen Sie die Maus über das Bild, um zu sehen, dass dem Bild der perspektivische Bildeffekt hinzugefügt wird.

Suchen Sie nach einem Bildfreigabe-Widget zusammen mit einem Perspektiven-Hover-Effekt wie unten?

Weiterlesen…

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen