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>
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!
Besuche meinen Youtube Channel und entdecke interessante Tipps, wie du Animationen erstellst sowie weitere Tipps rund um Elementor und Webdesign.
…lies diese 5 Planungs-Tipps, die Selbständige & Coaches tausende Euro kosten
