### [Come personalizzare le etichette per le scelte di immagini](https://wpforms.com/developers/how-to-customize-the-labels-for-image-choices/)
**Pubblicato:** 15 aprile 2024
**Autore:** Umair Majeed
**Contenuto:**
Vuoi migliorare l'aspetto visivo delle tue etichette per le scelte di immagini in WPForms? Sia che tu stia utilizzando le scelte di immagini per campi Casella di controllo o Scelta multipla, puoi creare effetti di hover coinvolgenti e stilizzare le tue etichette usando il CSS.
Questa guida ti mostrerà diversi modi per personalizzare le tue etichette per le scelte di immagini per creare un'esperienza di modulo più interattiva e visivamente accattivante.
## Impostazione del tuo modulo
Iniziamo creando un modulo e aggiungendo i nostri campi. Includeremo anche un campo **Casella di controllo** che utilizza anche le **Scelte di immagini**.
Se hai bisogno di aiuto per creare un modulo con Scelte di immagini, consulta la nostra guida su [impostazione delle scelte di immagini](https://wpforms.com/docs/how-to-add-image-choices-to-fields/).
## Personalizzazione delle etichette per le scelte di immagini
Questi esempi di CSS ti aiuteranno a creare vari effetti visivi per le tue etichette per le scelte di immagini. Per tutti gli esempi, ricorda di sostituire `form#wpforms-form-1000` con l'ID del tuo modulo. Se hai bisogno di aiuto per trovare l'ID del tuo modulo, consulta la nostra guida su [trovare gli ID dei moduli e dei campi](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
#### Sovrapponi le etichette all'hover
Questo stile crea un elegante effetto di sovrapposizione in cui le etichette appaiono sopra l'immagine quando gli utenti passano il mouse:
#### Aggiungi bordi ed effetti di riquadro
Utilizza le proprietà di bordo e riquadro per creare cornici, bordi o angoli arrotondati attorno alle etichette.
```
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
border-radius: 5px;
border: 1px solid #ccc;
padding: 5px;
}
```
#### Ruota le immagini all'hover
Applicando la regola CSS `transform`, introdurremo una deliziosa torsione alle nostre immagini. Al passaggio del mouse, ruoteranno elegantemente, iniettando un elemento interattivo giocoso nel tuo modulo. Questo effetto coinvolgente cattura i visitatori mentre navigano attraverso la loro selezione di immagini.
```
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-item:hover {
transform: rotate(10deg);
}
```
#### Ombra del riquadro all'hover
Migliorando le tue immagini con un tocco di profondità e dimensione, stiamo implementando un effetto di ombra del riquadro all'hover e rimuovendo il bordo predefinito all'hover. Mentre i tuoi visitatori scorrono ogni immagine, un'ombra sottile emerge con grazia, conferendo al tuo modulo un accattivante senso di profondità e interattività.
```
form#wpforms-form-1000 .wpforms-image-choices label:hover {
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
```
#### Combina effetti multipli (bordi, etichette e ombra del riquadro all'hover)
In quest'ultimo esempio, combineremo parte del CSS che abbiamo già utilizzato.
Quando passi il mouse sull'immagine ora, vedrai l'etichetta sopra l'immagine.
E questi sono solo alcuni esempi di quanto facilmente puoi personalizzare le etichette per le **Scelte di immagini**. Ti piacerebbe anche rimuovere lo spazio bianco che vedi attorno alle immagini? Dai un'occhiata al nostro articolo su [Come rimuovere lo spazio bianco attorno alle scelte di immagini](https://wpforms.com/developers/how-to-remove-whitespace-from-around-image-choices/ "Come rimuovere lo spazio bianco attorno alle scelte di immagini").
**Categorie:** Styling
---