3 coole CSS3 Bild Hover Effekte

Im modernen Web gibt es zahlreiche Techniken, die verwendet werden können, um interessante Interaktionen zu erzeugen, aber das einfachste und eleganteste ist normalerweise CSS und speziell die Zusätze, die mit CSS3 geliefert wurden.

Früher mussten wir uns auf JavaScript für diese Art von Effekt verlassen, aber dank der zunehmenden Unterstützung von CSS3 in allen Browsern ist es nun möglich, Effekte wie diese ohne jegliche Skripterstellung einzurichten. Es gibt leider immer noch Browser (IE9 und darunter), die CSS3 nicht unterstützen, so dass Sie entweder einen Ersatz für ältere Browser benötigen oder den Effekt als progressive Erweiterung behandeln müssen.

Heute werden wir uns ansehen, wie wir coole, aber saubere Hover-Effekte anwenden können, um Bildunterschriften ein- und auszublenden.

Wenn Sie dem Code folgen möchten, können Sie das tun Laden Sie die Dateien hier herunter.

Demo 1

Die erste Demo ist unsere einfachste: Das Bild wird nach rechts fliegen, um die Bildunterschrift zu zeigen.

Das Markup

Für den HTML-Code unserer zweiten Demo verwenden wir eine sehr ähnliche Markierung wie unsere erste Demo. Aber dieses Mal werden wir Demo-2 als Klasse verwenden und die Null- Klasse hinzufügen:

This is a cool title!
Lorem ipsum dolor sit amet.

Das CSS

Unser CSS wird fast das gleiche wie das erste Demo sein, außer dass wir diesmal unser Bild nach unten verschieben werden, indem wir die Eigenschaft unten auf -96px setzen. Wir verwenden auch den Übergang von CSS3, um einen glatten Effekt zu erzeugen:

.demo-2 {position:relative;width:300px;height:200px;overflow:hidden;float:left;margin-right:20px;background-color:rgba(26,76,110,0.5)}.demo-2 p,.demo-2 h2 {color:#fff;padding:10px;left:-20px;top:20px;position:relative}.demo-2 p {font-family:'Lato';font-size:12px;line-height:18px;margin:0}.demo-2 h2 {font-size:20px;line-height:24px;margin:0;font-family:'Lato'}.effect img {position:absolute;left:0;bottom:0;cursor:pointer;margin:-12px 0;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.effect img.top:hover {bottom:-96px;padding-top:100px}h2.zero,p.zero {margin:0;padding:0}

Demo 3

Für unsere letzte Demo erstellen wir einen Flip-Karten-Effekt. Das bedeutet, wenn Sie die Maus auf das Bild bewegen, dreht es sich um seine Achse, um die Beschreibung zu zeigen.