3 coole CSS3-Bild-Hover-Effekte

Im modernen Web gibt es zahlreiche Techniken, mit denen sich interessante Interaktionen erstellen lassen. Die einfachste und eleganteste ist jedoch normalerweise CSS und insbesondere die mit CSS3 gelieferten Ergänzungen. Früher mussten wir uns für diese Art von Effekten auf JavaScript verlassen, aber dank der ständig zunehmenden Unterstützung von CSS3 in allen Browsern ist es jetzt möglich, solche Effekte ganz ohne Skripting einzurichten. Leider gibt es immer noch Browser (IE9 und niedriger), die CSS3 nicht unterstützen, sodass Sie entweder einen Ersatz für ältere Browser benötigen oder den Effekt als progressive Verbesserung behandeln müssen. Heute schauen wir uns an, wie wir coole, aber nette Hover-Effekte anwenden können, um Bildunterschriften ein- und auszublenden. Wenn Sie dem Code lieber folgen möchten, können Sie dies tun Laden Sie die Dateien hier herunter.

Demo 1

Die erste Demo ist unsere einfachste: Das Bild fliegt nach rechts, um die Bildunterschrift anzuzeigen.

Das Markup

Für den HTML-Code unserer ersten Demo verwenden wir eine ungeordnete Liste und schließen dann die Beschriftung und das Bild darin ein. Beachten Sie, dass wir auch die Klasse hinzufügen werden Demo-1 Und Wirkung innerhalb des ungeordneten Listen-Tags. Das Markup sieht so aus:

Das CSS

Für unser CSS werden wir festlegen relativ Positionierung für unsere Demo-1 Klasse und richten Sie dann die ein Breite Und Höhe. Wir werden auch die übergelaufenen Elemente ausblenden. Ich habe auch einige grundlegende Stile für mich zusammengestellt h2 Und P Tags sowie mein Bild-Tag. Nun stellen wir für unsere Effektklasse die Positionierung auf ein absolut und gib ihm ein Marge von -15px nach oben und unten. Wir werden CSS3 verwenden Übergang um einen glatten Effekt zu erzielen. Unser CSS sieht so aus: .demo-1 { position:relative; Breite:300px; Höhe:200px; Überlauf versteckt; float:left; margin-right:20px; Hintergrundfarbe:rgba(26,76,110,0.5) } .demo-1 p,.demo-1 h2 { color:#fff; Polsterung:10px; links:-20px; oben:20px; position:relative } .demo-1 p { Font-Familie:’Lato’; Schriftgröße:12px; Zeilenhöhe:18px; margin:0 } .demo-1 h2 { Font-Familie:’Lato’; Schriftgröße:20px; Zeilenhöhe:24px; Rand:0; } .effect img { position:absolute; Rand:-15px 0; rechts:0; oben:0; Cursor:Zeiger; -webkit-transition: oben .4s Easy-In-Out, rechts .4s Easy-In-Out; -moz-transition:oben .4s Easy-In-Out,rechts .4s Easy-In-Out; -o-transition:oben .4s Easy-In-Out,rechts .4s Easy-In-Out; Transition:top .4s easy-in-out,right .4s easy-in-out } .effect img.top:hover { top:-230px; rechts:-330px; padding-bottom:200px; padding-left:300px }

Demo 2

Unsere zweite Demo zeigt, wie das Bild nach unten gleitet. Das heißt, wenn Sie mit der Maus über das Bild fahren, wird die Beschriftung darüber angezeigt.

Das Markup

Für den HTML-Code unserer zweiten Demo verwenden wir ein sehr ähnliches Markup wie in unserer ersten Demo. Aber dieses Mal werden wir es nutzen Demo-2 als Klasse und fügen Sie die hinzu null class:

  • Das ist ein cooler Titel!

    Lorem ipsum dolor sit amet.

Das CSS

Unser CSS wird fast das gleiche sein wie in der ersten Demo, außer dass wir dieses Mal unser Bild nach unten verschieben, indem wir die Eigenschaft festlegen unten bis -96px. Wir werden auch CSS3 verwenden Übergang um einen sanften Effekt zu erzeugen: .demo-2 { position:relative; Breite:300px; Höhe:200px; Überlauf versteckt; float:left; margin-right:20px; Hintergrundfarbe:rgba(26,76,110,0.5) } .demo-2 p,.demo-2 h2 { color:#fff; Polsterung:10px; links:-20px; oben:20px; position:relative } .demo-2 p { Font-Familie:’Lato’; Schriftgröße:12px; Zeilenhöhe:18px; margin:0 } .demo-2 h2 { Schriftgröße:20px; Zeilenhöhe:24px; Rand:0; Schriftfamilie:’Lato’ } .effect img { position:absolute; links:0; unten:0; Cursor:Zeiger; Rand:-12px 0; -webkit-transition:bottom .3s easy-in-out; -moz-transition:bottom .3s easy-in-out; -o-transition:bottom .3s easy-in-out; Transition:Bottom .3s Easy-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-Card-Effekt. Das heißt, wenn Sie mit der Maus über das Bild fahren, wird es um seine Achse gedreht, um die Beschreibung anzuzeigen.

Das Markup

Für unser letztes Demo-Markup verwenden wir eine andere Struktur. Zuerst verwenden wir HTML5 Figur Element zusammen mit a Bilderüberschrift Tag darin. Wir werden auch die verwenden Demo-3 Klasse für unsere ungeordnete Liste:

  • Das ist ein cooler Titel!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.

Das CSS

In unserem CSS setzen wir das Figurenbild auf a relativ positionieren und dann ausblenden Sichtbarkeit auf der Rückseite. Wir werden auch die verwenden drehenY transformieren: -180 Grad für Bildunterschrift und ändern Sie es dann auf 180 Grad, damit sowohl das Bild als auch die Beschriftung schweben: .demo-3 { position:relative; Breite:300px; Höhe:200px; Überlauf versteckt; float:left; margin-right:20px } .demo-3 Figure { margin:0; Polsterung:0; Position:relativ; Cursor:Zeiger; margin-left:-50px } .demo-3 Figure img { display:block; Position:relativ; Z-Index:10; margin:-15px 0 } .demo-3 Figure figcaption { display:block; Position:absolut; Z-Index:5; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } .demo-3figur h2 {font-family:’Lato’; Farbe:#fff; Schriftgröße:20px; text-align:left } .demo-3 Figure p { display:block; Schriftfamilie:’Lato’; Schriftgröße:12px; Zeilenhöhe:18px; Rand:0; Farbe:#fff; text-align:left } .demo-3 Figure figcaption { top:0; links:0; Breite: 100 %; Höhe: 100 %; Polsterung: 29px 44px; Hintergrundfarbe:rgba(26,76,110,0.5); text-align:center; backface-visibility:hidden; -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg); transform:rotateY(-180deg); -webkit-transition:all .5s; -moz-transition:all .5s; Transition:all .5s } .demo-3 Figure img { backface-visibility:hidden; -webkit-transition:all .5s; -moz-transition:all .5s; Transition:all .5s } .demo-3 Figure:hover img,figure.hover img { -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); transform:rotateY(180deg) } .demo-3 Figure:hover figcaption,figure.hover figcaption { -webkit-transform:rotateY(0); -moz-transform:rotateY(0); transform:rotateY(0) }

Aktuelle Artikel:

Empfohlen