How to Customize the Labels for Image Choices

Published:

If you’re looking to add your own flair to the labels while using Image Choices for your Checkbox and Multiple Choice items, CSS is your best friend. In this tutorial, we’re going to show you various ways of how to utilize CSS to customize the look of these labels.

Creating the form

Let’s begin by creating a form and adding our fields. We will also include a Checkbox field that is using Image Choices as well.

For any assistance needed on how to create a form that uses Image Choices, please check out this detailed guide.

create a form and add your Image Choices field

Customizing the labels for Image Choices

In these next few sections, we’re going to cover a variety of ways to stylize these labels using CSS. Simply find the one that works for you and apply it to your forms.

Each of these examples will be targeting a specific form ID with form#wpforms-form-1328, you’ll need to make sure that you update the form ID to match your own.

If you need help in finding your form ID, please check out this tutorial.

Styling the labels over the image on hover

With this CSS, you can customize the the labels, making them appear over the image when hovered over.

/* Position labels over images and hide them by default */
form#wpforms-form-1328 .wpforms-field .wpforms-image-choices-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* Adjust background color and opacity as desired */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Add smooth transition effect */
}

/* Show labels on hover */
form#wpforms-form-1328 .wpforms-field .wpforms-image-choices-item:hover .wpforms-image-choices-label {
    opacity: 1;
}

with this CSS you can easily style the labels to appear over the images when you hover

Border and box effects

Use border and box properties to create frames, borders, or rounded corners around the labels.

form#wpforms-form-1328 .wpforms-field .wpforms-image-choices-label {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px;
}

in this CSS example, we are placing a border around the label

Rotate image on hover

By applying the CSS rule transform, we’ll introduce a delightful twist to your images. Upon hovering, they’ll elegantly rotate, injecting a playful interactive element into your form. This engaging effect captivates visitors as they navigate through your selection of images.

form#wpforms-form-1328 .wpforms-field .wpforms-image-choices-item:hover {
    transform: rotate(10deg);
}

in this example we are applying a tilting effect when you hover over the image

Border and box-shadow on hover

Enhancing your images with a touch of depth and dimension, we’re implementing a box shadow effect on hover and removing the default border on hover. As your visitors glide over each image, a subtle shadow gracefully emerges, imbuing your form with a captivating sense of depth and interactivity.

form#wpforms-form-1328 .wpforms-image-choices label:hover {
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

with this CSS example, we are providing a box shadow on hover

Border, labels and box-shadow on hover

In this last example, we’re going to combine some of the CSS we’ve already used. 

form#wpforms-form-1328 .wpforms-field .wpforms-image-choices-item:hover .wpforms-image-choices-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f6f6f6;
    color: #333;
    padding: 20%;
    border-radius: 5px;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    width: 100%;
    height: 100%;
}

form#wpforms-form-1328 .wpforms-image-choices label:hover {
    border: none;
	box-shadow: none;
}

form#wpforms-form-1328 span.wpforms-image-choices-label {
    visibility: hidden;
	height: 0;
    padding: 0;
}

form#wpforms-form-1328 .wpforms-field .wpforms-image-choices-item:hover span.wpforms-image-choices-label {
	visibility: visible;
}

When you hover over the image now, you’ll see the label over the image.

with this CSS we can combine a little of everything

And those are just some examples how easily you can customize the labels for Image Choices. Would you like to also remove the whitespace you see around the images? Take a look at our article on How to Remove the Whitespace From Around Image Choices.

Still stuck? How can we help?
Last Updated on Apr 15, 2024