Möchten Sie die visuelle Attraktivität Ihrer Image Choice-Etiketten in WPForms verbessern? Egal, ob Sie Image Choices für Checkboxen oder Multiple-Choice-Felder verwenden, Sie können ansprechende Hover-Effekte erstellen und Ihre Labels mit CSS gestalten.
Dieser Leitfaden zeigt Ihnen verschiedene Möglichkeiten, wie Sie Ihre Image Choice-Etiketten anpassen können, um ein interaktiveres und visuell ansprechendes Formular zu erstellen.
Einrichten Ihres Formulars
Beginnen wir damit, ein Formular zu erstellen und unsere Felder hinzuzufügen. Wir werden auch ein Kontrollkästchen-Feld hinzufügen, das ebenfalls Image Choices verwendet.
Wenn Sie Hilfe bei der Erstellung eines Formulars mit Bildauswahl benötigen, lesen Sie bitte unseren Leitfaden zur Einrichtung von Bildauswahlen.
Bildauswahl-Etiketten anpassen
Mit diesen CSS-Beispielen können Sie verschiedene visuelle Effekte für Ihre Image Choice-Etiketten erstellen. Denken Sie bei allen Beispielen daran, Folgendes zu ersetzen form#wpforms-form-1000 mit Ihrer eigenen Formular-ID. Wenn Sie Hilfe bei der Suche nach Ihrer Formular-ID benötigen, lesen Sie bitte unseren Leitfaden auf Suche nach Formular- und Feld-IDs.
Overlay-Beschriftungen bei Hover
Dieser Stil erzeugt einen eleganten Überlagerungseffekt, bei dem die Beschriftungen über dem Bild erscheinen, wenn der Benutzer den Mauszeiger bewegt:
Rahmen- und Kasteneffekte hinzufügen
Verwenden Sie die Eigenschaften Rahmen und Rahmen, um Rahmen, Ränder oder abgerundete Ecken um die Etiketten zu erstellen.
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
border-radius: 5px;
border: 1px solid #ccc;
padding: 5px;
}
Bilder bei Hover drehen
Durch Anwendung der CSS-Regel transformbringen wir eine reizvolle Wendung in Ihre Bilder. Wenn Sie mit dem Mauszeiger darüber fahren, drehen sie sich elegant und bringen ein spielerisches interaktives Element in Ihr Formular. Dieser fesselnde Effekt fesselt die Besucher, während sie durch Ihre Bildauswahl navigieren.
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-item:hover {
transform: rotate(10deg);
}
Box-Schatten bei Hover
Um Ihren Bildern einen Hauch von Tiefe und Dimension zu verleihen, implementieren wir einen Box-Schatteneffekt beim Hovern und entfernen den Standardrahmen beim Hovern. Wenn Ihre Besucher über jedes Bild gleiten, entsteht ein subtiler Schatten, der Ihrem Formular ein fesselndes Gefühl von Tiefe und Interaktivität verleiht.
form#wpforms-form-1000 .wpforms-image-choices label:hover {
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
Kombinieren Sie mehrere Effekte (Rahmen, Etiketten und Box-Schatten bei Hover)
In diesem letzten Beispiel werden wir einige der CSS, die wir bereits verwendet haben, kombinieren.
Wenn Sie jetzt den Mauszeiger über das Bild bewegen, sehen Sie die Beschriftung über dem Bild.
Und das sind nur einige Beispiele dafür, wie einfach Sie die Beschriftungen für Image Choices anpassen können. Möchten Sie auch den Leerraum um die Bilder entfernen? Schauen Sie sich unseren Artikel über das Entfernen der Leerzeichen um die Bildauswahlen an.