Webdesign - Hover-Effekte bei Bildern mit Überschriften und Begleittexten

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Hauskatze auf Ibiza

Hauskatze auf Ibiza

ColorKey

Photo © Monika & Klaus Franz

Webdesign - Wie realisiert man schöne hover-Effekte bei Bildern?

03Aug2014

Hover-Effekte bei Bildern mit Überschriften und Begleittexten.


Im letzten Artikel hatte ich den Zusammenhang zwischen den beiden Elementen "figure" und "figcaption" in HTML5 (HyperText Markup Language) für Bilder und den zugehörigen Begleittext erklärt. Mit dem ":hover"-Element und 3D-Transformationen lassen sich nun interessante Effekte erzielen.
Aber beachten Sie, dass diese Techniken nur mit modernen Browsern funktionieren.

Für alle Bildeffekte habe ich den gleichen Aufbau in HTML5 (HyperText Markup Language) gewählt. Zusätzlich zu den einfachen Beispielen aus dem vorherigen Artikel, teile ich dem "figure-Element" noch eine Klasse ".hov" zu und setze den Text in ein "p-Element". Dadurch kann ich die Effekte für jedes Bild einzeln in CSS (Cascading Style Sheet) realisieren und den Text getrennt von "figcaption" animieren. Und das "figcaption-Element" kann noch für zusätzliche Effekte, wie zum Beispiel einen schönen Rahmen, genutzt werden.

<figure class="hov1">
    <img src="bilder660/Strand_bei_Portsalon.jpg" width="660" height="455"
      alt="Menschenleerer Strand">
    <figcaption>
      <h4>Irland <span>2008</span></h4>
      <p>
        Menschenleerer Strand bei Portsalon
        auf der Halbinsel Fanad in Irland
      </p>
      <a href="../fotogalerie-Reisen/Irland2008"
        title="Sprung zu den Reisebildern aus Irland aus dem Jahr 2008">
        Reisebildern aus Irland
      </a>
    </figcaption>
</figure>

Dann folgen für alle Bildeffekte ein paar grundsätzlichen Einstellungen im CSS (Cascading Style Sheet).

Erklärung

  • Das "figure-Element" wird platziert, alles darin mittig ausgerichtet und der Text in weiß und als Großbuchstaben dargestellt.
  • Das Bild wird halb transparent eingeblendet.
  • Für den Inhalt des "figcaption-Element" und dem Verweis wird die volle Größe des Bildes gewählt.
  • Außerdem wird dann noch der Text des Verweises ausgeblendet.
  • Die "h4-Überschrift" wird mittig auf das Bild und etwas versetzt von oben dargestellt, außerdem wird die Schriftgröße und ein Schatten um die Überschrift festgelegt.
  • Für das "span-Element" der "h4-Überschrift" wird eine etwas weniger fette Schriftdarstellung gewählt.
  • Und schließlich wird auch das "p-Element" für den Begleittext mittig auf das Bild, aber nur mit einer maximalen Breite von 200px, dargestellt. Schriftfarbe und Größe, sowie der Abstand zwischen den einzelnen Buchstaben werden als letztes festgelegt.
figure {
    position: relative;
    overflow: hidden;
    width: 41.25em;
    margin: 1em auto;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
}

figure img {
    opacity: .5;
}

figcaption,
figure a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure a {
    z-index: 10;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

figure h4 {
    margin: 0 auto;
    padding: 25% 3% 0 0;
    font: 800 2em Arial;
    text-shadow: 2px 4px 2px #101010, 1px 1px 0 #505050;
}

figure h4 span {
    font-weight: 300;
}

figure p {
    max-width: 200px;
    margin: 0 auto;
    letter-spacing: .06em;
    font-size: .8em;
    color: #fff;
}

Ohne Effekte, also ohne zusätzliche Angabe der Klasse im "figure-Element", würde die Einblendung des Bildes mit Überschrift und Begleittext wie unten dargestellt aussehen.

Kornfeld

Ibiza im Jahr 2011

Drohendes Unwetter über Kornfeldern im Norden von Ibiza.

Reisebilder aus Ibiza

Photo © Monika & Klaus Franz


Nun mache ich mich an die Arbeit um ein paar schöne Effekte zu erzielen.

Im folgenden Beispiel wird das Bild mit einer Größe von 125% dargestellt. Nachdem man mit dem Mauszeiger das Bild berührt, wird durch den "hover-Effekt" das Bild innerhalb von einer halben Sekunde auf Normalgröße verkleinert und nur noch mit 10% Transparenz dargestellt, gleichzeitig wird ein Rahmen eingeblendet und der Text von zuerst 150% Größe auf 100% zurückgestellt.

Kornfeld

Ibiza 2011

Drohendes Unwetter über Kornfeldern im Norden von Ibiza.

Reisebilder aus Ibiza

Photo © Monika & Klaus Franz


Das CSS (Cascading Style Sheet) für diesen Effekt sieht wie folgt aus und dürfte selbsterklärend sein.

figure.hov1 img {
    transition: .5s;
    transform: scale(1.4);
}

figure.hov1:hover img {
    opacity: .9;
    transform: scale(1.15);
}

figure.hov1 figcaption:before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
    transform: scale(1.1);
}

figure.hov1 p {
    transform: scale(1.5);
}

figure.hov1 figcaption:before,
figure.hov1 p {
    opacity: 0;
    transition: .5s;
}

figure.hov1:hover figcaption:before,
figure.hov1:hover p {
    opacity: 1;
    transform: scale(1);
}

Im zweiten Beispiel wird das Bild von rechts nach links, wie bei einem Panoramaschwenk, eingeblendet. Der eingeblendete Rahmen hat runde Ecken und einen Schatten nach innen, und der Text ist rechtsbündig angeordnet und wandert von der rechten Seite zur Mitte.

Menschenleerer Strand

Irland 2008

Menschenleerer Strand bei Portsalon auf der Halbinsel Fanad in Irland.

Reisebilder aus Irland

Photo © Monika & Klaus Franz


Das zugehörige CSS (Cascading Style Sheet) für diesen Effekt sieht ähnlich wie im ersten Beispiel aus.

figure.hov11 img {
    width: 860px;
    transform: translate3d(-200px,0,0);
    transition: opacity .5s, transform 3s;
}

figure.hov11:hover img {
    opacity: .9;
    transform: translate3d(0,0,0);
}

figure.hov11 figcaption:before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    border-radius: 50px;
    box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
    content: '';
    transform: scale(1.1);
}

figure.hov11 figcaption:before,
figure.hov11 p {
    opacity: 0;
    transition: .5s;
}

figure.hov11 p {
    border-right: 1px solid #fff;
    text-align: right;
    transform: translate3d(100%,0,0) scale(1.2);
}

figure.hov11:hover figcaption:before,
figure.hov11:hover p {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
}

Im dritten Beispiel bleibt die Größe des Bildes gleich. Nachdem man mit dem Mauszeiger das Bild berührt, wird ein Text mit einem oberen Balken eingeblendet. Text und Balken ziehen 20 Pixel nach oben, während gleichzeitig die Überschrift um 20 Pixel nach unten zieht. Außerdem wird ein Rahmen, dessen Linien von der Mitte nach außen gezeichnet werden, um das Hauptmotiv gezogen.

Gleninchaquin Park

Irland 2006

Der Drombeg Stone Circle ist etwa zwischen 153 v.Ch. bis 127 n.Ch. errichtet worden.

Reisebilder aus Irland

Photo © Monika & Klaus Franz


Auch für dieses Beispiel habe ich das zugehörige CSS (Cascading Style Sheet) unten aufgeführt.

figure.hov2 img {
    transition: .5s;
}

figure.hov2:hover img {
    opacity: .9;
}

figure.hov2 figcaption:before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: scale(0,1);
}

figure.hov2 figcaption:after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: scale(1,0);
}

figure.hov2 figcaption:before,
figure.hov2 figcaption:after {
    position: absolute;
    top: 240px;
    right: 30px;
    bottom: 20px;
    left: 30px;
    content: '';
    opacity: 0;
    transition: .5s;
}

figure.hov2 h4 {
    padding-top: 10%;
    transition: .5s;
    transform: translate3d(0,-20px,0);
}

figure.hov2 p {
    max-width: 350px;
    text-transform: none;
    opacity: 0;
    transition: .5s;
    transform: translate3d(0,20px,0);
}

figure.hov2 p:after {
    position: absolute;
    top: -35%;
    left: 0;
    width: 100%;
    height: .25em;
    background: #fff;
    content: '';
}

figure.hov2:hover figcaption:before,
figure.hov2:hover figcaption:after {
    opacity: 1;
    transform: scale(1);
}

figure.hov2:hover h4,
figure.hov2:hover p {
    opacity: 1;
    transform: translate3d(0,0,0);
}

Im letzten Beispiel gleiten das Bild und die Überschrift nach unten. Gleichzeitig werden ein Rahmen, dessen Linien von oben und links gezeichnet werden, und ein Text eingeblendet.
Die Besonderheit in diesem Beispiel ist die Angabe "transform-origin: 0 0", mit der eine Linie von links oben gezogen wird. Mit "transform-origin: 100% 0" würde sie von rechts oben und mit "transform-origin: 100% 100%" würde sie von rechts unten gezogen.
Im eigentlichen Sinn bedeutet die Anweisung "Festlegung des Drehpunkt bei einer Rotation". Die beiden Werteangaben bedeuten: Der erste Wert steht für die X- oder Horizontal-Achse, und 0 steht dabei für links. Der zweite Wert steht für die Y- oder Vertikal-Achse und 0 steht dabei für oben.

Blume

Fotogalerie Blumen

Blumenbild auf Leinwand gezogen.

Blumenbilder

Photo © Monika & Klaus Franz


Und für dieses Beispiel sieht das zugehörige CSS (Cascading Style Sheet) wie folgt aus.

figure.hov3 {
    height: 26.6em;
}

figure.hov3 figcaption:before,
figure.hov3 figcaption:after {
    position: absolute;
    content: '';
    opacity: 0;
}

figure.hov3 figcaption:before {
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: scale(0,1);
    transform-origin: 0 0;
}

figure.hov3 figcaption:after {
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: scale(1,0);
    transform-origin: 0 0;
}

figure.hov3 p {
    position: relative;
    overflow: hidden;
    max-width: 380px;
    opacity: 0;
}

figure.hov3 p:after {
    position: absolute;
    bottom: 30px;
    left: 0;
    top: 0;
    width: 100%;
    height: .2em;
    background: #fff;
    content: '';
    transition: transform .5s;
    transform: translate3d(-100%,0,0);
}

figure.hov3 img,
figure.hov3 h4 {
    transform: translate3d(0,-30px,0);
}

figure.hov3 img,
figure.hov3 figcaption:before,
figure.hov3 figcaption:after,
figure.hov3 p,
figure.hov3 h4 {
    transition: 1s;
}

figure.hov3:hover img {
    opacity: .9;
    transform: translate3d(0,0,0);
}

figure.hov3:hover figcaption:before,
figure.hov3:hover figcaption:after {
    opacity: 1;
    transform: scale(1);
}

figure.hov3:hover h4,
figure.hov3:hover p,
figure.hov3:hover p:after {
    opacity: 1;
    transform: translate3d(0,0,0);
}

So lassen sich noch viele Abwandlungen mit tollen Effekten bilden. Wie wäre es zum Beispiel mit einer Fotowand über die man in die verschiedenen Fotogalerien kommt?
Viel Spaß beim Experimentieren!

Zum Seitenanfang springen Λ