CSS hat sich in Version 3 unglaublich weiterentwickelt und ersetzt mittlerweile JavaScript fast komplett in Sachen Animationen. Ich möchte Euch einladen, eine kleine Effect-Story in der Weihnachtszeit mit mir zu gehen. Ich möchte eine Card entwickeln, die verschiedene Effecte vereint: Das Teaser-Bild skaliert beim MouseOver, das Herz animiert beim Klick und zum Kommentieren dreht sich die Card auf die Vorderseite, sodass man auf der Rückseite eine große Fläche zum Meinungsaustausch zur Verfügung hat.

Starten wir los!

See the Pen Card // Hover Effect Simple by Dominic Dreier (@DreierDominic) on CodePen.20484

 

Die Card habe ich mit festen Werten definiert und ganz simple aufgebaut. Ich setze auf Clean-Design, um eine sauberen Look zu erzeugen. Für den MouseOver-Effect benötigen für ein <div> mit der Eigenschaft overflow:hidden;. Diesem platzieren wir an unsere gewünschte Stellen. Für den Effect fügen wir nun in das <div> ein weiteres <div> hinzu. Wir haben also praktisch in Pug folgendes geschrieben:

div.card-header
div.header-img

.header-img geben wir im CSS folgende Werte mit:

height: 100%;
width: 100%;
background: url(https://source.unsplash.com/y3aP9oo9Pjc/500x500) left center;
background-size: 100%;
border-radius: inherit;
transition: all ease-in-out .4s;

transition definiert was, wie lange, und in welchem Intervall animiert werden soll. Um nun den Effect der Skalierung umzusetzen, brauchen wir eine Pseudo-Klasse :hover und zwar fügen wir folgendes in unseren CSS3-Code ein:

.card:hover .header-img {
transform: scale(1.25) rotate(2deg);
}

Wenn der Nutzer mit seiner Maus über die Card geht, wird dem div.header-img ein transform scale & rotate mitgegeben. Und nun kommt der Klue: Da unser Eltern-div overflow: hidden mit sich führt, wird unser Kind-div nicht aus dem Elternteil hinaus angezeigt. Eine schöne Animation entsteht.

Im zweiten Teil machen wir uns an die Heart-Animation. Seid gespannt und folgt mir auf Codepen!

Starte die Diskussion

×
Cookies: Diese Webseite verwendet Cookies, um korrekt zu funktionieren und Ihnen ein optimales Nutzererlebnis zu bieten. Wenn Sie damit einverstanden sind, setzen Sie Ihren Besuch der Seite fort.