¿Desea mejorar el atractivo visual de sus etiquetas de Elección de Imagen en WPForms? Ya sea que esté utilizando Image Choices para Checkboxes o campos Multiple Choice, puede crear atractivos efectos hover y estilizar sus etiquetas utilizando CSS.
Esta guía le mostrará varias maneras de personalizar sus etiquetas de Elección de Imagen para crear una experiencia de formulario más interactiva y visualmente atractiva.
Configuración del formulario
Empecemos creando un formulario y añadiendo nuestros campos. También incluiremos un campo Checkbox que está utilizando Image Choices también.
Si necesita ayuda para crear un formulario con opciones de imagen, consulte nuestra guía sobre la configuración de opciones de imagen.
Personalización de las etiquetas de elección de imagen
Estos ejemplos de CSS le ayudarán a crear varios efectos visuales para sus etiquetas Image Choice. En todos los ejemplos, recuerde sustituir form#wpforms-form-1000 con su propio ID de formulario. Si necesita ayuda para encontrar su ID de formulario, consulte nuestra guía sobre encontrar ID de formulario y de campo.
Etiquetas superpuestas al pasar el ratón por encima
Este estilo crea un elegante efecto de superposición en el que las etiquetas aparecen sobre la imagen cuando los usuarios pasan el ratón por encima:
Añadir efectos de borde y recuadro
Utilice las propiedades de borde y caja para crear marcos, bordes o esquinas redondeadas alrededor de las etiquetas.
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
border-radius: 5px;
border: 1px solid #ccc;
padding: 5px;
}
Girar imágenes al pasar el ratón por encima
Aplicando la regla CSS transformintroduciremos un giro encantador en tus imágenes. Al pasar el ratón sobre ellas, girarán con elegancia, inyectando un divertido elemento interactivo a su formulario. Este atractivo efecto cautiva a los visitantes mientras navegan por su selección de imágenes.
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-item:hover {
transform: rotate(10deg);
}
Sombra de caja al pasar el ratón
Para dar a tus imágenes un toque de profundidad y dimensión, hemos implementado un efecto de sombra de caja al pasar el ratón por encima y hemos eliminado el borde por defecto al pasar el ratón por encima. A medida que tus visitantes se deslizan sobre cada imagen, una sutil sombra emerge con gracia, imbuyendo a tu formulario de una cautivadora sensación de profundidad e interactividad.
form#wpforms-form-1000 .wpforms-image-choices label:hover {
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
Combinar varios efectos (borde, etiquetas y sombra de caja al pasar el ratón por encima)
En este último ejemplo, vamos a combinar algunos de los CSS que ya hemos utilizado.
Ahora, cuando pases el ratón por encima de la imagen, verás la etiqueta sobre la imagen.
Y estos son sólo algunos ejemplos de lo fácil que es personalizar las etiquetas de las Opciones de imagen. ¿Le gustaría también eliminar el espacio en blanco que ve alrededor de las imágenes? Eche un vistazo a nuestro artículo sobre Cómo eliminar los espacios en blanco alrededor de las opciones de imagen.