Level Up Your Gravity Forms Image Choices with a 3D Hover + Glare Effect
Let’s be real — nobody wakes up excited to fill out a form. Forms are just… forms. But what if we could make them feel less like a chore and more like an experience?
That’s exactly why we built Image Choices for Gravity Forms here at JetSloth. Instead of boring old radio buttons, you get to turn your form fields into clickable, colorful images. Want people to choose between beach holidays or mountain escapes? Boom — drop in some photos, and your WordPress form instantly feels more fun.
Now here’s where it gets even better: we can add some spicy front-end effects like a little 3D hover and a glare that follows the mouse. Think of it like your form field is winking at your users every time they hover over it.
And the best part? It only takes a few lines of CSS and JavaScript.
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.
1. Add the JavaScript Snippet
After installing Image Choices, the first step is to add the JavaScript snippet below with a free plugin like Gravity Wiz Code Chest. You can easily inject the following JS and CSS into your form to enable the features.
const cards = document.querySelectorAll(".image-choices-choice");
cards.forEach(card => {
const glare = card.querySelector(".image-choices-choice-image-wrap::after"); // we’ll manipulate via style
card.addEventListener("mousemove", (e) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
// Card tilt
const rotateX = ((y - centerY) / centerY) * 12;
const rotateY = ((x - centerX) / centerX) * 12;
card.style.transform = `
perspective(800px)
rotateX(${-rotateX}deg)
rotateY(${rotateY}deg)
scale(1.09)
`;
// Glare effect
const angle = Math.atan2(y - centerY, x - centerX) * (180 / Math.PI);
const intensity = Math.min(1.2, Math.hypot(x - centerX, y - centerY) / centerX);
card.style.setProperty("--glare-angle", `${angle}deg`);
card.style.setProperty("--glare-opacity", intensity);
card.style.setProperty("--glare-x", `${x}px`);
card.style.setProperty("--glare-y", `${y}px`);
card.style.setProperty("--glare-active", 1);
});
card.addEventListener("mouseenter", () => {
card.style.setProperty("--glare-active", 1);
});
card.addEventListener("mouseleave", () => {
card.style.transform = "perspective(800px) rotateX(0deg) rotateY(0deg) scale(1)";
card.style.setProperty("--glare-active", 0);
});
});2. Style with CSS
/* Setup perspective */
.image-choices-field .image-choices-choice {
transform-style: preserve-3d;
transition: transform 0.15s ease, box-shadow 0.15s ease;
will-change: transform;
cursor: pointer;
}
/* Image Glare */
.image-choices-field .image-choices-choice .image-choices-choice-image-wrap:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 150%;
height: 150%;
pointer-events: none;
background: radial-gradient(
circle at var(--glare-x, 50%) var(--glare-y, 50%),
rgba(255,255,255,0.6),
transparent 70%);
opacity: var(--glare-active, 0);
transition: opacity 0.3s ease;
mix-blend-mode: screen;
filter: blur(10px);
}Final Thoughts
With just a little CSS and JavaScript, you can add stunning perspective hover and glare effects to your Gravity Forms Image Choices. Not only does this elevate the design of your WordPress forms, but it also helps create an interactive, memorable experience for your users.
At JetSloth, we’re all about making Gravity Forms not just functional, but delightful. If you haven’t tried Image Choices yet, give it a spin — and then add these effects to really make your forms shine.
Because forms shouldn’t just be filled out — they should stand out.
Included in JetSloth All Access
This addon is included in the All Access. Existing subscribers to JetSloth All Access get it automatically! Log into your account and download now.
