Elementor Animation, CSS & Java Script
How to create amazing Card Hover Effect in Elementor Pro (2024)
SHARE
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;
}
Mobile Versions with Click Animation
CSS Code:
/* 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
<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>