Creating Engaging Hover Animation Cards in Elementor: A Step-by-Step Guide
SHARE
Elevate Your Website’s User Experience with Interactive Team Member Cards
In today’s competitive digital landscape, standing out means going beyond static web design. Interactive elements like hover animations can transform ordinary website interactions into memorable experiences. This guide explores how to create an engaging team section with sophisticated hover effects using Elementor Pro.
The Final Result: What We’re Building
Our project features a sleek team section where each member is displayed in a circular container. When visitors hover over a team member’s image, they’ll experience:
– A smooth image scale animation
– A dark overlay that emerges gracefully
– Clear white text displaying name and position
– Social media icons for easy connection
– An enhanced box shadow effect for visual depth
Mobile-First Considerations
The design includes special considerations for mobile users:
– Indicator circles showing where to tap
– Touch-activated animations matching desktop hover effects
– Smart interaction feedback where circles disappear after first tap
– Maintained functionality across all devices
Essential Setup Requirements
Before starting, you’ll need:
– Elementor Pro Advanced Plan
– Basic understanding of container structures
– Square-formatted team member images
– Custom CSS implementation capability
Key Components Structure
The design consists of several nested containers:
1. Main Section Container
– Full-width vertical layout
– 100vh height
– Centered content alignment
2. Card Container
– 33% width for three-column layout
– Circular border radius
– Custom hover effects
3. Content Elements
– Team member image
– Overlay container
– Name and position text
– Social media icons
– Click indicators for mobile
CSS Implementation
The animation relies on several key CSS properties:
– Transform scale properties for image zoom
– Opacity transitions for overlay effects
– Position absolute for overlay positioning
– Custom classes for hover states
– Mobile-specific animation classes
Mobile Optimization Techniques
To ensure smooth mobile performance:
1. Responsive Layout Adjustments
– Vertical column structure for smaller screens
– Adjusted spacing and padding
– Touch-friendly interaction areas
2. Interactive Elements
– Click hint circles implementation
– JavaScript-powered touch interactions
– Smooth state transitions
Best Practices and Tips
For optimal implementation:
– Maintain consistent container naming conventions
– Organize elements in proper stacking order
– Test thoroughly across different devices
– Ensure accessible color contrast ratios
– Optimize image sizes for performance
Creating engaging hover animations doesn’t have to be complicated. With Elementor Pro and the right approach to structure and styling, you can create professional, interactive elements that enhance user engagement and provide a polished look to your website’s team section.
Implementation Notes:
– Always backup your site before adding custom code
– Test the animations across different browsers
– Consider loading performance when adding animations
– Ensure all interactive elements are keyboard accessible
– Maintain consistent styling with your website’s theme
By following this guide, you’ll be able to implement a professional-grade hover animation that works seamlessly across all devices, providing an enhanced user experience that keeps visitors engaged with your content.
1. Desktop Version
CSS Code
.hover-container {
aspect-ratio: 1/1;
}
.round-image:hover .hover-content {
opacity: 1;
transform: translate(-50%, -50%) scale(1) !important; /* Endgröße: 1 (sichtbar) */
}
.hover-content {
transform: translate(-50%, -50%) scale(0) !important; /* Startgröße: 0 (unsichtbar) */
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease !important;
text-align: center;
pointer-events: none;
transition: box-shadow 0.3s ease-in-out !important; /* Sanfte Übergänge */
}
.image {
overflow: hidden;
border-radius: 50%;
aspect-ratio: 1/1;
}
.image:hover .hover-content {
pointer-events: all;
}
2. Mobile Version with Click Animation
CSS Code for mobile version
/* Position the animated circle in the center */
.click-hint-circles {
position: absolute;
top: 25%;
left: 25%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
/* Base circles */
.click-hint-circles .circle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3); /* Circle color */
animation: pulse 1.5s infinite ease-in-out;
}
/* Animation for the pulsing effect */
@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
/* Different delays for the circles to pulse in sequence */
.click-hint-circles .circle:nth-child(1) {
animation-delay: 0s;
}
.click-hint-circles .circle:nth-child(2) {
animation-delay: 0.5s;
}
.click-hint-circles .circle:nth-child(3) {
animation-delay: 1s;
}
/* Class to hide the circles after a click */
.click-hint-circles.hide {
display: none; /* Hides the circles */
}
/* Media Query: Show circles only on mobile devices */
@media (min-width: 768px) {
.click-hint-circles {
display: none; /* Hides the circles on larger screens */
}
}
JavaScript Code for mobile version
<script>
// Select all round-image containers
const roundImages = document.querySelectorAll('.round-image');
// Add a click event listener to each round-image container
roundImages.forEach(function(image) {
image.addEventListener('click', function() {
const clickHintCircles = this.querySelector('.click-hint-circles'); // Find the circles
if (clickHintCircles) {
clickHintCircles.classList.add('hide'); // Hide the circles after the click
}
});
});
</script>
