SHARE
In der heutigen digitalen Welt reicht es nicht mehr aus, nur statische Webdesigns zu verwenden. Interaktive Elemente wie Hover-Animationen verwandeln einfache Webseiten-Interaktionen in eindrucksvolle Erlebnisse. Diese Anleitung zeigt, wie du mit Elementor Pro eine ansprechende Team-Sektion mit eleganten Hover-Effekten erstellst.
Unsere Team-Sektion wird ein modernes und interaktives Design haben, bei dem jedes Teammitglied in einem kreisförmigen Container angezeigt wird. Beim Hover über ein Bild passiert folgendes:
Das Design ist speziell für mobile Nutzer optimiert:
Vor dem Start benötigst du:
1. Hauptsektion (Main Section Container)
2. Karten-Container (Card Container)
3. Inhaltselemente (Content Elements)
Die Animation basiert auf folgenden wichtigen CSS-Eigenschaften:
Um eine reibungslose Leistung auf Mobilgeräten sicherzustellen:
1. Anpassung des responsiven Layouts
2. Interaktive Elemente
Für eine optimale Umsetzung:
Hover-Animationen müssen nicht kompliziert sein. Mit Elementor Pro und einer durchdachten Struktur kannst du professionelle, interaktive Effekte erstellen, die die Nutzererfahrung verbessern und der Team-Sektion deiner Website ein modernes, ansprechendes Design verleihen.
Durch diese Anleitung kannst du eine hochwertige Hover-Animation umsetzen, die auf allen Geräten reibungslos funktioniert. So erhöhst du das Nutzererlebnis und sorgst dafür, dass Besucher länger auf deiner Website verweilen.
.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;
}
/* 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 */
}
}
<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>
Hi, ich bin Sabine – Webdesignerin und WordPress-Expertin. Ich entwickle professionelle Websites, die technisch überzeugen und deine Business-Ziele unterstützen.
Damit du ohne Umwege zu deiner Website kommst, habe ich dir die 5 wichtigsten Tipps zusammengestellt. So sparst du wertvolle Zeit und Geld!
Den digitalen Masterplan bekommst du als Dankeschön für dein Newsletter Abo.
*Pflichtfeld. Du kannst dich jederzeit mit einem Klick wieder abmelden. Meine E-Mails enthalten neben zahlreichen kostenlosen Tipps und Inhalten auch Informationen zu meinen Produkten, Angeboten, Aktionen und zu meinem Unternehmen. Hinweise zum Datenschutz erhältst du unter Datenschutz.