How to Create a Stunning Card Hover Reveal Effect Using Elementor Free Version
Any WordPress website may be made more visually appealing and user-friendly by adding interactive, contemporary card hover effects. You can create complex card reveal effects even with Elementor’s free edition; no coding knowledge or expensive plugins are needed. This post outlines several techniques, offers detailed instructions, and provides the best suggestions for producing stunning card hover reveals.
Elementor Free + Simple CSS
You don’t need Elementor Pro or advanced add-ons to create a card reveal effect! With just a touch of custom CSS, the free version is fully capable.
Step-by-Step Guide
Design Your Card Layout
Use Elementor to add a container, section, or column for your “card.”
Add the content to display upfront (e.g., title, image).
Insert Hidden Reveal Content
Add an inner section or widget within your card that contains the extra content to reveal.
Assign a class to the hidden content, such as hover-reveal.
- Add Custom CSS
Add HTML container and paste the given HTML <style> tag to that container and make it working.
<style>
/* Main container with custom class */
.hover-reveal {
--height: 150px;
--bottom: -150px;
overflow: hidden !important;
position: relative; /* Required for absolute positioning inside */
}
/* Info box inside the container */
.hover-reveal .info {
height: var(--height);
position: absolute;
bottom: var(--bottom); /* Hidden by default */
backdrop-filter: blur(5px);
transition: 0.5s ease-in-out;
width: 100%; /* Full width */
left: 0;
}
/* Reveal on hover */
.hover-reveal:hover .info {
bottom: 0; /* Slide up */
}
</style>