Webdesign-Archiv Werbung Webdesign

Projekte » CSS Spielwiese » Bilder-Galerie

Eric Meyer dürfte den meisten gut bekannt sein. Seine css Experimente sind fortschritlich und Ihrer Zeit weit vorraus. Ich lasse mich auch gerne davon inspirieren. Das folgende Beispiel ist angelehnt an diesen Artikel von dem oben genannten Autor.

CSS Bildergalerie

Fahren Sie mit der Maus über die Bilder. Das ganze funktioniert ohne Einsatz von Javascript. Ausprobiert habe ich es in Firefox 1.5* und Internet Explorer 6*.
Bei Klick auf die Bilder verlassen Sie diese Seite.

hallo welt
hier wird getestet und ausprobiert.
html/css am Beispiel Titicaca und Alpbachtal , ...


Diese Galerie ist ein einfaches css Beispiel. Es wäre möglich hier über den Einsatz von Ajax zu denken. Mal sehen, was mir hierzu noch einfällt.

Der Trick ist simpel und schnell erklärt. In dem a tag befindet sich ein span tag. Standardmäßig ist dieser durch display:none; ausgeblendet. Bei Mouse-Over wird dieser sichtbar gemacht, absolut positioniert und mittels padding und margin ausgerichtet. Mehr ist es nicht.

Die letzten zwei Bilder haben noch ein Rahmen (einen recht bescheidenen...) obendrauf. Auch noch einfach. Innerhalb des span Tag einen strong und diesem als Background den Rahmen zuweisen.

hallo welt
hier wird getestet und ausprobiert.
html/css am Beispiel Titicaca und Alpbachtal , ...


Das ganze könnte auch horizontal ausgerichtet werden. Diesen Beweis bleibe ich aber vorerst schuldig ;) Mal sehen wann ich wieder ein bisschen Zeit habe. Die Idee entstand hier.

Und da es hier um Galerien geht, ein Bild von Madjid, eins von Heinz-Jürgen Menzinger und last but not least Mehdi. Das Bild von Mehdi gefällt mir sehr gut, daher dürfen edle Spender, ihr wisst schon ;) Kunst inspiriert...

Impressum / Datenschutz