### [Cómo personalizar las etiquetas para las opciones de imagen](https://wpforms.com/developers/how-to-customize-the-labels-for-image-choices/)
**Publicado:** 15 de abril de 2024
**Autor:** Umair Majeed
**Contenido:**
¿Quieres mejorar el atractivo visual de las etiquetas de tus Opciones de Imagen en WPForms? Ya sea que estés utilizando 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 también utiliza **Opciones de Imagen**.
Si necesitas ayuda para crear un formulario con Opciones de Imagen, consulta nuestra guía sobre [configuración de Opciones de Imagen](https://wpforms.com/docs/how-to-add-image-choices-to-fields/).
## Personalización de las etiquetas de Opciones de Imagen
Estos ejemplos de CSS te ayudarán a crear varios efectos visuales para las etiquetas de tus 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, consulta nuestra guía sobre [cómo encontrar los IDs de formulario y campo](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
#### Superponer etiquetas al pasar el ratón por encima
Este estilo crea un elegante efecto de superposición donde las etiquetas aparecen sobre la imagen cuando los usuarios pasan el ratón por encima:
#### Añadir bordes y efectos de caja
Utiliza 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;
}
```
#### Rotar imágenes al pasar el ratón por encima
Al aplicar la regla CSS `transform`, introduciremos un giro encantador en tus imágenes. Al pasar el ratón por encima, se 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 por encima
Mejorando tus imágenes con un toque de profundidad y dimensión, estamos implementando un efecto de sombra de caja al pasar el ratón por encima y eliminando el borde predeterminado al pasar el ratón por encima. A medida que tus visitantes se deslizan sobre cada imagen, una sutil sombra emerge 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 (bordes, etiquetas y sombra de caja al pasar el ratón por encima)
En este último ejemplo, vamos a combinar parte del CSS que ya hemos utilizado.
Cuando pases el ratón por encima de la imagen ahora, 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](https://wpforms.com/developers/how-to-remove-whitespace-from-around-image-choices/ "Cómo eliminar el espacio en blanco alrededor de las opciones de imagen").
**Categorías:** Estilismo
---