If you’re using the Kadence theme, you probably appreciate how fast and clean it is. But you’ll also know it is low on those sexy micro-animations that Framer and Webflow have ready to go.
I ran into this recently while building out some service boxes. Kadence doesn’t offer this interaction natively (their image overlay block is just terrible), but some html structuring and a small CSS tweak did the job, without needing a separate plugin or jQuery. Just say no to Elementor!
We don’t need to install a separate plugin for basic animation effects.
Here’s the approach that ended up working best, it keeps your layout simple and your DOM lean.
Step-by-Step Creation of Hover Animated Box in Kadence WP
1. Set Up the Section in the Block Editor Using Kadence Sections and Custom Classes
Here’s how to structure the content properly in the Kadence block editor so the hover animation works:
- Add a Section block (or use the one made in the Row Layout block)
- Give this outer section the class:
themetester-box-hover-container - Apply a background image or color to the section to make it pretty and set padding (e.g., 20–30px).
- It’s also nice to enable a Hover Overlay in the section settings for better contrast when revealing text.
- Give this outer section the class:
- Inside the section, add another section and give it class:
themetester-box-title, and add the things that are always displayed, such as:- A Kadence Advanced Heading
– This will be your box title (e.g., “Awesome Service 1”).
– This title will always be visible. No animation is applied to the text directly, just its positioning. - A Spacer or Divider block
– Optional, but it helps visually separate the title from the text to be revealed.
- A Kadence Advanced Heading
- Below the divider, add another Kadence Section block and give it class:
themetester-box-hover- This is where the expandable content will live.
- It can contain a text block, paragraph, link, button, or whatever you want to reveal on hover.
Your block hierarchy in the editor will look like this:
Container section (class: themetester-box-hover-container)
└── Title section (class: themetester-box-title)
├── Advanced Heading (your title)
├── Spacer/Divider
└── Hidden section (class: themetester-box-hover)
├── Text/Paragraph block
└── Button or Link (optional)And you HTML like this:
<div class="themetester-box-hover-container">
<div class="themetester-box-title">
<h3>Awesome Service 1/h3>
<hr />
</div>
<div class="themetester-box-hover">
<p>Info about service.</p>
<a href="#">Link →</a>
</div>
</div>Why this setup?
- You’re not using two different columns for hover/not-hover states, just one content section that’s initially hidden.
- This way, you avoid layout jumps and don’t need to rely on
position: absolutehacks. - When someone hovers over the container, the lower content fades in and the title shifts up slightly, creating a natural reveal effect.
Once you have this layout in place, you’re ready to move on to the CSS animation in step 2.
2. Add the CSS to Customizer
Go to Appearance → Customize → Additional CSS and add this:
/* Animate the title when hovered */
.themetester-box-title {
transition: transform 0.3s ease;
}
.themetester-box-hover-container:hover .themetester-box-title {
transform: translateY(-10px);
}
/* Fade in and reveal hidden text */
.themetester-box-hover {
opacity: 0;
transform: translateY(10px);
max-height: 0;
overflow: hidden;
transition:
opacity 0.4s ease,
transform 0.4s ease,
max-height 0.4s ease;
pointer-events: none;
}
.themetester-box-hover-container:hover .themetester-box-hover {
opacity: 1;
transform: translateY(0);
max-height: 500px; /* adjust as needed */
pointer-events: auto;
}What this does:
- When you hover over the container, the title moves up slightly.
- At the same time, the hidden content fades in and expands upward.
- There’s no need for absolute positioning or JS. It uses standard flow, so it works naturally on mobile as well.
You can also add the CSS anywhere else, like your custom CSS file, or even straight into the Kadence Section’s custom CSS area.
3. Customize the Animation
You can take this further depending on your layout and style. Here are some ideas:
Zoom the background image slightly on hover:
.themetester-box-hover-container {
transition: background-size 0.4s ease;
background-size: 100%;
}
.themetester-box-hover-container:hover {
background-size: 105%;
}Add a shadow or border animation:
.themetester-box-hover-container {
transition: box-shadow 0.3s ease;
}
.themetester-box-hover-container:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}And make sure your max-height value is high enough, or swap it for height: auto if you don’t mind layout shift.
That’s It
This method gives you a clean and accessible way to reveal more content on hover in Kadence, without adding plugins or stacking multiple blocks with visibility toggles.
I like this better than a Flip Box effect, but that can be created similarly as well.
It’s a simple pattern that works well for service grids, feature boxes, and even portfolio items. And since it’s just CSS, it keeps your site fast and light.
Let me know if you use this pattern on your own site, and if you want to see a Flip Box version, I might code that for another project.
