Resumen de IA
¿Quieres mejorar el atractivo visual de las etiquetas de tus Opciones de Imagen en WPForms? Ya sea que estés usando Opciones de Imagen para campos de Casillas de verificación o de Opción múltiple, puedes crear efectos de superposición atractivos y estilizar tus etiquetas usando CSS.
Esta guía te mostrará varias formas de personalizar las etiquetas de tus Opciones de Imagen para crear una experiencia de formulario más interactiva y visualmente atractiva.
Configuración de tu formulario
Comencemos creando un formulario y agregando nuestros campos. También incluiremos un campo de Casilla de verificación que utiliza Opciones de Imagen.
Si necesitas ayuda para crear un formulario con Opciones de Imagen, por favor revisa nuestra guía sobre cómo configurar Opciones de Imagen.
Personalización de las etiquetas de Opciones de Imagen
Estos ejemplos de CSS te ayudarán a crear varios efectos visuales para tus etiquetas de Opciones de Imagen. Para todos los ejemplos, recuerda reemplazar form#wpforms-form-1000 con el ID de tu propio formulario. Si necesitas ayuda para encontrar el ID de tu formulario, por favor consulta nuestra guía sobre cómo encontrar los IDs de formularios y campos.
Superponer etiquetas al pasar el ratón
Este estilo crea un elegante efecto de superposición donde las etiquetas aparecen sobre la imagen cuando el usuario pasa el ratón por encima:
Añadir borde y efectos de caja
Utiliza 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;
}
Rotar imágenes al pasar el ratón
Al aplicar la regla CSS transform, introduciremos un giro encantador en tus imágenes. Al pasar el ratón por encima, rotarán elegantemente, inyectando un elemento interactivo lúdico en tu formulario. Este efecto atractivo cautiva a los visitantes mientras navegan por tu 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
Mejorando tus imágenes con un toque de profundidad y dimensión, implementaremos un efecto de sombra de caja al pasar el ratón y eliminaremos el borde predeterminado al pasar el ratón. A medida que tus visitantes se muevan sobre cada imagen, una sutil sombra emergerá con gracia, dotando 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 múltiples efectos (borde, etiquetas y sombra de caja al pasar el ratón)
En este último ejemplo, vamos a combinar parte del CSS que ya hemos utilizado.
Ahora, al pasar el ratón sobre la imagen, verás la etiqueta sobre la imagen.
¿Y esos son solo algunos ejemplos de lo fácil que puedes personalizar las etiquetas para Opciones de Imagen. ¿Te gustaría también eliminar el espacio en blanco que ves alrededor de las imágenes? Echa un vistazo a nuestro artículo sobre cómo eliminar el espacio en blanco alrededor de las Opciones de Imagen.