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

Wie erstelle ich CSS-Bildunterschriftseffekte?

1

Wenn Sie ein Bild auf einen Server hochladen, hat es Eigenschaften wie URL, Titel, Bildunterschrift, Alternativtext und Beschreibung. Sie können das Bild und die Bildunterschrift jedoch nur auf der veröffentlichten Website sehen. Im Allgemeinen konzentrieren sich Webmaster darauf, das Bild zu präsentieren und die Bedeutung der Bildunterschrift zu vergessen. In diesem Artikel zeigen wir Ihnen, wie Sie CSS-Bildunterschrifteneffekte erstellen, um Ihre Bildunterschriften attraktiv zu präsentieren.

WordPress lernen: Sehen Sie sich über 400 kostenlose WordPress-Tutorials an.

CSS-Bildunterschriften-Effekt

Die Widgets sehen wie folgt aus.

Bildunterschrift – Slide-Down-Stil

Bildunterschrift nach unten schieben. Verknüpfung möglich.

Bildunterschrift – Horizontal geteilter Stil

Horizontal geteilte Stilbeschriftung.

Bildunterschrift – Vertikaler Split-Stil

Vertikal geteilte Bildunterschrift

Bildunterschrift – Stil nach oben schieben

Bildunterschrift nach oben schieben

4 verschiedene Stile

Wie Sie in der Demo sehen können, gibt es vier verschiedene Effekte, mit denen Sie die Bildunterschrift erstellen können.

  • Herunterrutschen
  • Horizontale Teilung
  • Vertikale Teilung
  • Nach oben schieben

HTML für Bildbeschriftungseffekte

Lassen Sie uns zunächst den HTML- Teil mit Slide-Down-Effekt erklären, damit der CSS-Teil leicht verständlich wird. Unten ist der HTML-Code für den Slide-Down-Effekt.

<div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div>

Es hat die folgenden CSS-Klassen:

  • common – Dies ist der allgemeine Stilsatz, der für alle vier Effekte anwendbar ist.
  • Slidedown – Dies ist der Stil, der zum Erstellen des Slide-Down-Effekts festgelegt wurde. Für die anderen drei Effekte haben wir die CSS-Klassen Split-Horiz, Split-Vert und Slideup verwendet. Sie können diese Klasse einfach ersetzen, um den anderen Effekt zu erzielen.
  • pic-caption – Dies ist die Klasse, die den Effekt in Bezug auf die Bildunterschrift definiert.

Hinweis: Die Bildgröße 300×300 px wird verwendet, damit auf mobilen Geräten keine zusätzlichen Anpassungen erforderlich sind.

CSS für Bildunterschrifteneffekte

Im obigen HTML-Code haben wir die Datei "imagecaption.css" verwendet, um alle erforderlichen CSS aus einer externen Datei zu importieren. Unten ist das CSS für den Slide-Down-Effekt und Sie können die vollständigen CSS- und HTML-Dateien herunterladen, indem Sie auf die Schaltfläche unten klicken.

/* General Style */ .common{ margin: 0; padding: 0; display: inline-block; position: relative; overflow: hidden; } .common::before, .common::after{ content: ''; width: 100%; height: 100%; background: black; position: absolute; opacity: 0.3; top: 0; left 0; -moz-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; } .pic-caption { position: absolute; text-align: center; background: lightyellow; z-index: 999; width: 100%; max-height: 100%; overflow: hidden; top: 50%; -webkit-transform: translate3d(-100%, -50%, 0); transform: translate3d(-100%, -50%, 0); -webkit-transition: all 0.5s; transition: all 0.5s; line-height: 30px; font-size: 16px; } .pic-caption a{ text-decoration: none; } img { display: block; } /* Slidedown Caption */ .slidedown:hover::before{ -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slidedown:hover .pic-caption{ opacity: 1; -moz-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; -moz-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
  • Im Abschnitt „Allgemeiner Stil” haben wir Inline-Blöcke für die Anzeige jedes Bildblocks erstellt.
  • Pseudo-Elemente (::before und ::after) werden verwendet, um den Slider-Effekt auf dem Bild zu erzeugen.
  • Sie können die Beschriftung nur beim Bewegen des Mauszeigers sehen und ist unsichtbar, wenn die Seite geladen wird.
  • Die Klasse „pic-caption” weist der Bildunterschrift eine hellgelbe Farbe zu und lädt die Bildunterschrift zu 50 % vom oberen Rand der Bildposition.
  • CSS-Übergang und -Transformation helfen beim Verschieben der Bildunterschrift von links nach rechts im Bild.
  • Der Abschnitt unter „Slide down caption” hilft, den Schieberegler und dann die Beschriftung mithilfe von CSS-Transformations- und Übergangseigenschaften anzuzeigen.

Nutzung auf Ihrer Webseite

Laden Sie die ZIP-Datei „Image Caption Effects.zip” herunter, die die vollständigen HTML- und CSS-Codes für alle vier Stile von Bildbeschriftungseffekten enthält.

Das Zip-Archiv enthält zwei Dateien „imagecaption.css” und „Imagecaption.html”.

  • Laden Sie die CSS-Datei in den gleichen Ordner Ihres HTML-Codes hoch oder geben Sie den vollständigen Link zur CSS-Datei im HTML-Code an.
  • Sie können das CSS auch mit …-Tags in den Kopfbereich des HTML einfügen.
  • Betten Sie den HTML-Code zwischen den Body-Tags Ihrer Webseite ein.
  • Sie können nur den für den jeweiligen Effekt relevanten HTML-Div-Abschnitt verwenden.

Der vollständige HTML-Code für alle vier Stile sollte wie folgt aussehen:

<!DOCTYPE html> <html> <head> <title>CSS Image Caption Effects</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="imagecaption.css"> </head> <body> <div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div> <div class="common split-horiz"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Split Horizontal"> <div class="pic-caption">Horizontl Split Style Caption.</div> </div> <div class="common split-vert"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Split Vertical"> <div class="pic-caption">Vertical Split Style Caption</div> </div> <div class="common slideup"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slideup"> <div class="pic-caption">Image Slide Up Caption</div> </div> </body> </html>

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