Resumo de IA
Quer aprimorar o apelo visual dos seus rótulos de Escolha de Imagem no WPForms? Quer você esteja usando Escolhas de Imagem para campos de Caixa de Seleção ou Múltipla Escolha, você pode criar efeitos de hover envolventes e estilizar seus rótulos usando CSS.
Este guia mostrará várias maneiras de personalizar seus rótulos de Escolha de Imagem para criar uma experiência de formulário mais interativa e visualmente atraente.
Configurando Seu Formulário
Vamos começar criando um formulário e adicionando nossos campos. Incluiremos também um campo de Caixa de Seleção que está usando Escolhas de Imagem.
Se precisar de ajuda para criar um formulário com Escolhas de Imagem, consulte nosso guia sobre configuração de Escolhas de Imagem.
Personalizando Rótulos de Escolha de Imagem
Estes exemplos de CSS ajudarão você a criar vários efeitos visuais para seus rótulos de Escolha de Imagem. Para todos os exemplos, lembre-se de substituir form#wpforms-form-1000 pelo ID do seu formulário. Se precisar de ajuda para encontrar o ID do seu formulário, consulte nosso guia sobre encontrar IDs de formulário e campo.
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 usuários passam o mouse:
Adicionar Borda e Efeitos de Caixa
Use propriedades de borda e caixa para criar molduras, bordas ou cantos arredondados ao redor dos rótulos.
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
border-radius: 5px;
border: 1px solid #ccc;
padding: 5px;
}
Girar Imagens ao Passar o Mouse
Ao aplicar a regra CSS transform, introduziremos um toque delicioso em suas imagens. Ao passar o mouse, elas girarão elegantemente, injetando um elemento interativo lúdico em seu formulário. Este efeito envolvente cativa os visitantes enquanto eles navegam por 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
Aprimorando suas imagens com um toque de profundidade e dimensão, estamos implementando um efeito de sombra de caixa ao passar o mouse e removendo a borda padrão ao passar o mouse. Conforme seus visitantes deslizam sobre cada imagem, uma sombra sutil emerge graciosamente, imbuindo 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 parte do CSS que já usamos.
Ao passar o mouse sobre a imagem agora, você verá o rótulo sobre a imagem.
E esses são apenas alguns exemplos de como você pode personalizar facilmente os rótulos para Escolhas de Imagem. Gostaria também de remover o espaço em branco que você vê ao redor das imagens? Dê uma olhada em nosso artigo sobre Como Remover o Espaço em Branco ao Redor das Escolhas de Imagem.