Schlagwörterarchiv: Hover-Effekte

CSS3-Tricks: 3D-Flip Hover Animation für Serviceboxen

CSS3-Tricks: Coole 3D-Animationen mit Hover-Effekt erstellen

the-cube-service-box

Auf der Webseite von Code My UI habe ich eine interessante Anleitung zur Erstellung von CSS3-Animationen mit tollen Hover-Effekten gefunden.

Die 3D-Flip-Animation können Sie sehr gut auf einem Privat-Portfolio oder auf einer Service-Webseite verwenden, wo Sie mit mehreren Boxen verschiedene Dienstleistungen anbieten können.

Wenn Sie mit der Maus über die 4 verschiedenfarbigen Boxen fahren, rotieren diese mit einem 3D-Flip und zeigen – die zuerst versteckten – zusätzlichen Infos zu Ihren angebotenen Diensten. Entworfen hat das coole Projekt Rahul Dhiman, auf CodePen.io können Sie sein Projekt live bearbeiten und die Hover-Effekte je nach Lust und Laune bearbeiten.

Weiterlesen

3 interessante und coole CSS3 Image Hover-Effekte

3 cool and beautiful CSS3 image hover effects

screenshot-3-hover-effects

Auf den modernen Webseiten gibt es zahlreiche Techniken, die verwendet werden können, um interessante Interaktionen zu schaffen. Die einfachsten und elegantesten wurden in der Regel mit CSS realisiert – und insbesondere durch die Ergänzungen, welche mit CSS3 aufkamen.

In den „alten Tagen des Internets“ mussten die Webdesigner (und solche, die sich dafür hielten) JavaScript anwenden, um bestimmte Effekte oder Wirkungen zu erzielen. Dank der ständig wachsenden Unterstützung für CSS3 in allen Browsern ist es nun möglich, die 3 von mir unten weiter angeführten Hover-Effekte recht einfach und rasch einzurichten.

Weiterlesen

CSS-Tricks: 5 verschiedene Hover-Effekte nur mit CSS3

Wie Sie nur mit CSS3 wunderschöne Animationen und Übergänge erstellen

5-interessante-css3-effekte

Mein heutiges kurzes Tutorial zeigt Ihnen, wie einfach und elegant Sie mit CSS3 interessante und schöne Hover-Effekte erstellen können. Wenn Sie mit der Maus über die 6 verschiedenen Grafiken fahren, erhalten Sie die weiter unten stehenden 5 Mouseover-Animationen, die Sie bei Bedarf auch völlig frei für Ihre Projekte verwenden können.

Der Originalartikel zum meinen Ausführungen stammt vom März 2014 und erschien auf der Webseite von Queness.com unter dem Titel Create Different Styles of Hover Effects with CSS3 Only. Dort finden Sie auch einen DEMO- und DOWNLOAD-Button, um die Effekte einzeln anzusehen bzw. das gesamte Beispiel herunterzuladen.

Link zur Demoseite: hier anklicken!!!
Link zum Download: hier anklicken!!!
Weiterlesen

3 einfache und coole CSS3 Hover-Effekte für Grafiken

Wie Sie mit CSS3 interessante Mouse-Over-Effekte für Grafiken erstellen

3 cool CSS3 image hover effects

Bei den heutigen modernen Webseiten und Browsern gibt es zahlreiche Techniken, die verwendet werden können, um interessante Interaktionen zu erstellen. Die einfachste und eleganteste sind in der Regel CSS und insbesondere die Ergänzungen, die mit CSS3 kamen.

Heute möchte ich Ihnen zeigen, wie Sie mit dem Einsatz von Hover (:hover) und Übergängen (transitions) richtig schöne und coole CSS3-Effekte zum Ein- und Ausblenden von Bildern und Bildunterschriften erstellen können.

Weiterlesen