My name is David Hellmann
I do design & development and I love it.

Gestern hab ich das gemacht, was ich schon länger mal machen wollte. Eine Kategorie für Fotos angelegt um hin und wieder mal ein Foto zu posten. Das soll auch als Motivation dienen öfters mal Fotos zu machen. Dahingehend bin ich ja leider immer etwas faul. Jetzt hab ich mir für die Fotokategorie ein paar eigene Templates angelegt. Zum einen für die Single Darstellung der Posts und zum anderen für die Archivdarstellung. Genau dort werden die Fotos als kleines Preview gezeigt und per Mouseover dunkeln diese sich bei mir etwas ab.

Diesen kleinen netten Effekt kann man ganz einfach mit CSS machen. Und zwar legt man das Bild einfach in einen DIV, dieser bekommt eine Hintergrundfarbe (bei mir schwarz, #000) und per Mausover wird das Bild einfach leicht auf Transparent gesetzt (das schwarz scheint durch) und dunkelt somit ab. Das kann man natürlich auch mit anderen Farben machen womit sich auch eine andere Wirkung erzielen lässt. Auch mit der Stärke der Transparenz kann man noch spielen. Das ganze wird dann noch mittels Transitions schön smooth animiert um der Sache den letzten Glanz zu verleihen. Welche Browser das aktuell unterstützen? Mir egal. Danach hab ich nicht geschaut da es nichts lebensnotwendiges ist.

An schauen kann man sich das ganze bei mir im Archiv für Fotos.

Hier der Code

1
2
3

<div class="fotoBox">
	<img src="bilderordner/bild.jpg" alt="bild" />
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

.fotoBox {
	background: #000;
}
 
	.fotoBox img {
		-moz-transition:  opacity .3s linear;
		-webkit-transition:  opacity .3s linear;
		transition:  opacity .3s linear;
	}
 
	.fotoBox img:hover {
		opacity: 0.5;
	}