### [Anpassen der Beschriftungen für Bildauswahlen](https://wpforms.com/developers/how-to-customize-the-labels-for-image-choices/)
**Veröffentlicht:** 15. April 2024
**Autor:** Umair Majeed
**Inhalt:**
Möchten Sie die visuelle Attraktivität Ihrer Bildauswahlbeschriftungen in WPForms verbessern? Egal, ob Sie Bildauswahlen für Kontrollkästchen- oder Mehrfachauswahlfelder verwenden, Sie können ansprechende Hover-Effekte erstellen und Ihre Beschriftungen mit CSS gestalten.
Diese Anleitung zeigt Ihnen verschiedene Möglichkeiten, Ihre Bildauswahlbeschriftungen anzupassen, um ein interaktiveres und optisch ansprechenderes Formularerlebnis zu schaffen.
## Einrichten Ihres Formulars
Beginnen wir mit der Erstellung eines Formulars und dem Hinzufügen unserer Felder. Wir werden auch ein **Kontrollkästchen**-Feld einfügen, das ebenfalls **Bildauswahlen** verwendet.
Wenn Sie Hilfe beim Erstellen eines Formulars mit Bildauswahlen benötigen, lesen Sie bitte unsere Anleitung zum [Einrichten von Bildauswahlen](https://wpforms.com/docs/how-to-add-image-choices-to-fields/).
## Anpassen von Bildauswahlbeschriftungen
Diese CSS-Beispiele helfen Ihnen, verschiedene visuelle Effekte für Ihre Bildauswahlbeschriftungen zu erzielen. Ersetzen Sie für alle Beispiele `form#wpforms-form-1000` durch Ihre eigene Formular-ID. Wenn Sie Hilfe beim Auffinden Ihrer Formular-ID benötigen, lesen Sie bitte unsere Anleitung zum [Auffinden von Formular- und Feld-IDs](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
#### Beschriftungen beim Hovern überlagern
Dieser Stil erzeugt einen eleganten Überlagerungseffekt, bei dem Beschriftungen beim Hovern über dem Bild erscheinen:
#### Rahmen und Box-Effekte hinzufügen
Verwenden Sie Rahmen- und Box-Eigenschaften, um Rahmen, Umrandungen oder abgerundete Ecken um die Beschriftungen zu erstellen.
```
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
border-radius: 5px;
border: 1px solid #ccc;
padding: 5px;
}
```
#### Bilder beim Hovern drehen
Durch Anwenden der CSS-Regel `transform` führen wir eine reizvolle Drehung unserer Bilder ein. Beim Hovern drehen sie sich elegant und verleihen Ihrem Formular ein verspieltes interaktives Element. Dieser fesselnde Effekt fesselt die Besucher, während sie Ihre Bildauswahl durchsuchen.
```
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-item:hover {
transform: rotate(10deg);
}
```
#### Box-Schatten beim Hovern
Um Ihre Bilder mit einem Hauch von Tiefe und Dimension zu verbessern, implementieren wir beim Hovern einen Box-Schatten-Effekt und entfernen den Standardrahmen beim Hovern. Wenn Ihre Besucher über jedes Bild gleiten, erscheint ein subtiler Schatten, der Ihrem Formular eine fesselnde 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);
}
```
#### Mehrere Effekte kombinieren (Rahmen, Beschriftungen und Box-Schatten beim Hovern)
Im letzten Beispiel kombinieren wir einige der bereits verwendeten CSS-Regeln.
Wenn Sie nun mit der Maus über das Bild fahren, sehen Sie die Beschriftung über dem Bild.
Und das sind nur einige Beispiele, wie einfach Sie die Beschriftungen für **Bildauswahlen** anpassen können. Möchten Sie auch den Leerraum um die Bilder entfernen? Sehen Sie sich unseren Artikel [So entfernen Sie den Leerraum um Bildauswahlen](https://wpforms.com/developers/how-to-remove-whitespace-from-around-image-choices/ "So entfernen Sie den Leerraum um Bildauswahlen").
**Kategorien:** Styling
---