5202

ein Blog über technische Fragen zu Blogger

Farbfilter für Bild-Hover

von
Heute mal was für die Freunde des gepflegten Hoverns - viele Blogger finden ja Transparenz-Effekte (opacity) beim Hovern ihrer Bilder schick und mit zunehmender 'Durchsichtigkeit' werden die Bilder dabei heller. Warum eigentlich?

Antwort: Weil der Bildhintergrund 'weiß' ist und wenn ein Bild sagen wir mal zu 70% Transparent ist, scheinen eben 30% weiße Hintergrund durch.

Was passiert nun, wenn man dem Bild statt eines weißen einen farbigen Hintergrund gibt? Dann ergibt das Hovern einen Farbfilter-Effekt.

Ungewohnt

Die Idee hinter der Skizze ist, das der 'Transparenz'-Effekt beim Hovern von Fotos in blogspot.com Blogs relativ verbreitet ist - statt immer nur die Bilder 'heller' zu machen, könnte man ihnen ja doch mal einen farbigen Touch geben, oder?

Das ist sicher nichts für jeden und für jedes Bild, aber als Effekt für so mal zwischendurch stelle ich mir es interessant vor.

Wie wird's gemacht?

Die Umsetzung ist denkbar einfach - ihr legt euer Bild in einen div Container und darein kommt das Bild.
HTML
<div class="red"><img src="http://goo.gl/1Pu9t" /></div>
Für mehrere unterschiedliche Farben müsst ihr entsprechend mehr Klassen vergeben und dementsprechend schreiben ... ist nicht schwierig :).

CSS

Die CSS ist auch nicht besonders kompliziert - der div Container bekommt die Eigenscchaft table, das Bild die Eigenschaft table-cell:
.red{
display: table;
line-height: 0;
font-size: 0;
background: red;
}
.red img {
display: tabel-cell;
top: 0;
left: 0;
opacity: 1
}
Der Hintergrund des div Containers ist 'red', die 'Durchsichtigkeit' des Bildes ist 1, d.h. das Bild ist undurchsichtig.

Bei Hovern wird nun das Bild eine opacity: .7 gegeben, d.h. das Bild wird zu 30% Transparent ... durch das Bild scheint der rote Hintergrund von dem div Container durch.
.red img:hover {
opacity: .7
}
Und damit das ganze 'smooth' geschieht, legen wir noch ein Transition auf den Vorgang:
.red img {
  -webkit-transition: .1s opacity linear;
     -moz-transition: .1s opacity linear;
      -ms-transition: .1s opacity linear;
       -o-transition: .1s opacity linear;
           transition: .1s opacity linear
}
Und das war's eigentlich auch schon - so simpel so far!

Anmerkungen, Fragen

Ihr habt was tolles damit umgesetzt und wollt die Welt jetzt an eurem Werk teilhaben lassen? Immer her mit den Links ... nichts funktioniert, ihr versteht nur Bahnhof? Fragt einfach nach.