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 einendiv 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 - derdiv 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!
