Add a Blur Hover Effect to Gravity Forms Image Choices Product Cards
Add a slick CSS blur hover effect
When you’re building product option forms in WordPress, the last thing you want is a boring set of radio buttons. That’s why so many designers love JetSloth’s Image Choices add-on for Gravity Forms. It transforms standard fields into clickable image cards — perfect for products, plans, or anything visual.
But here’s the fun part: with a little custom CSS, you can make those cards feel even more premium. Today we’re looking at a slick CSS blur hover effect that fades in your product’s price when a user hovers over the card. It’s subtle, stylish, and super easy to add.
What you’ll need to follow along
A copy of Gravity Forms Image Choices
Easily add images to choices for radio buttons or checkbox fields within Gravity Forms. Supports Survey, Poll, Quiz, Product and Options fields.
Gravity Wiz Code Chest
Gravity Wiz Code Chest is a free Gravity Forms add-on that lets you inject custom CSS and Javascript to individual forms.
The CSS Snippet
After installing Image Choices, the first step is to add the CSS snippet below with a free plugin like Gravity Wiz Code Chest. You can easily inject the following JS and CSS into your form.
This CSS Snippet works for the Cover Tile Image Choice Theme but you could also test it other themes. You’ll need to add a product field set to radio or checkbox to get the product price value showing, however.
/* Global CSS overrides */
.image-choices-field {
--ic-text-font: 'Google Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
--ic-text-weight: 400;
--ic-text-size: 15px;
--ic-text-color: #fff;
--ic-price-size: 17px;
--ic-price-color: white;
}
/* Image hover scale */
.image-choices-choice .image-choices-choice-image-wrap {
scale: 1;
transition: scale 0.2s ease-in-out;
overflow: hidden;
}
.image-choices-choice-hover .image-choices-choice-image-wrap {
scale: 1.05;
}
/* Price blur reveal */
.image-choices-choice-price {
position: absolute !important;
bottom: -20px;
right: 0;
width: 100%;
height: 100%;
padding: 40px;
backdrop-filter: blur(10px);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease-in-out;
text-align: center;
z-index: 2;
}
.image-choices-choice-hover .image-choices-choice-price {
opacity: 1;
pointer-events: all;
bottom: 0;
}
/* Choice hover scale */
.image-choices-choice {
scale:1;
transition: scale 0.2s ease-in-out;
box-shadow:none;
}
.image-choices-choice.image-choices-choice-hover {
scale:1.02;
box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
Not using a product field?
Not a problem, like the example below, if you want this effect bu are not using a product field, you can add the below CSS also, and it will apply to all radio and checkbox default fields.
/* Add blur on hover if not using a product field */
.image-choices-choice .image-choices-choice-image-wrap{
filter:blur(0px);
transition: all 0.2s ease-in-out;
}
.image-choices-choice.image-choices-choice-hover .image-choices-choice-image-wrap{
filter:blur(10px);
}Why Add Hover Effects to Forms?
Forms usually feel like chores. But in ecommerce or product-driven WordPress sites, your forms are part of the shopping experience. Every touchpoint should feel polished. Adding a hover effect to product option cards does a couple of things:
- Guides attention: Users know exactly where to look when making a choice.
- Adds polish: Micro-interactions make your site feel modern and trustworthy.
- Improves UX: Price info stays hidden until needed, keeping forms clean.
And the best part? You don’t need extra plugins — just a few lines of CSS on top of JetSloth’s Image Choices.
Final Thoughts
Gravity Forms already gives you the power to build complex forms in WordPress. JetSloth’s Image Choices add-on takes those forms to the next level with product-style cards. And with just a little CSS, you can add modern micro-interactions like this blur hover effect.
The result? Forms that don’t just collect data — they feel like part of your brand experience.
If you’re using Gravity Forms for products, services, or donations, give this effect a try. It’s quick, easy, and guaranteed to make your WordPress forms look more polished. Because let’s face it — if users enjoy filling out your form, they’re a lot more likely to finish it.
Gravity Forms Image Choices
Easily add images as choices for Radio Buttons or Checkboxes fields within Gravity Forms. Includes support for Survey, Quiz, Product and Options.
