### [Como Personalizar os Rótulos para Escolhas de Imagem](https://wpforms.com/developers/how-to-customize-the-labels-for-image-choices/)
**Publicado:** 15 de abril de 2024
**Autor:** Umair Majeed
**Conteúdo:**
Quer melhorar o apelo visual dos seus rótulos de Escolha de Imagem no WPForms? Quer esteja a usar Escolhas de Imagem para campos de Checkbox ou Múltipla Escolha, pode criar efeitos de hover envolventes e estilizar os seus rótulos usando CSS.
Este guia irá mostrar-lhe várias formas de personalizar os seus rótulos de Escolha de Imagem para criar uma experiência de formulário mais interativa e visualmente apelativa.
## Configurar o seu Formulário
Vamos começar por criar um formulário e adicionar os nossos campos. Incluiremos também um campo de **Checkbox** que está a usar **Escolhas de Imagem**.
Se precisar de ajuda para criar um formulário com Escolhas de Imagem, consulte o nosso guia sobre [configurar Escolhas de Imagem](https://wpforms.com/docs/how-to-add-image-choices-to-fields/).
## Personalizar Rótulos de Escolha de Imagem
Estes exemplos de CSS irão ajudá-lo a criar vários efeitos visuais para os seus rótulos de Escolha de Imagem. Para todos os exemplos, lembre-se de substituir `form#wpforms-form-1000` pelo ID do seu próprio formulário. Se precisar de ajuda para encontrar o ID do seu formulário, consulte o nosso guia sobre [encontrar IDs de formulário e campo](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
#### Sobrepor Rótulos ao Passar o Mouse
Este estilo cria um elegante efeito de sobreposição onde os rótulos aparecem sobre a imagem quando os utilizadores passam o mouse:
#### Adicionar Efeitos de Borda e Caixa
Use propriedades de borda e caixa para criar molduras, bordas ou cantos arredondados em torno dos rótulos.
```
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
border-radius: 5px;
border: 1px solid #ccc;
padding: 5px;
}
```
#### Rodar Imagens ao Passar o Mouse
Ao aplicar a regra CSS `transform`, introduziremos um toque delicioso nas suas imagens. Ao passar o mouse, elas rodarão elegantemente, injetando um elemento interativo divertido no seu formulário. Este efeito envolvente cativa os visitantes enquanto eles navegam pela sua seleção de imagens.
```
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-item:hover {
transform: rotate(10deg);
}
```
#### Sombra de Caixa ao Passar o Mouse
Melhorando as suas imagens com um toque de profundidade e dimensão, estamos a implementar um efeito de sombra de caixa ao passar o mouse e a remover a borda padrão ao passar o mouse. À medida que os seus visitantes deslizam sobre cada imagem, uma sombra subtil emerge graciosamente, imbuindo o seu formulário com uma sensação cativante de profundidade e interatividade.
```
form#wpforms-form-1000 .wpforms-image-choices label:hover {
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
```
#### Combinar Múltiplos Efeitos (Borda, Rótulos e Sombra de Caixa ao Passar o Mouse)
Neste último exemplo, vamos combinar alguns dos CSS que já usámos.
Quando passar o mouse sobre a imagem agora, verá o rótulo sobre a imagem.
E esses são apenas alguns exemplos de como pode facilmente personalizar os rótulos para **Escolhas de Imagem**. Gostaria também de remover o espaço em branco que vê em torno das imagens? Dê uma olhada no nosso artigo sobre [Como Remover o Espaço em Branco em Torno das Escolhas de Imagem](https://wpforms.com/developers/how-to-remove-whitespace-from-around-image-choices/ "Como Remover o Espaço em Branco em Torno das Escolhas de Imagem").
**Categorias:** Estilização
---