Abonnieren
Bei cssglobe habe ich gerade eine geniale Technik gefunden, wie man nur mit CSS und ohne JavaScript Thumbnails bauen kann, von denen zunächst nur ein Ausschnitt gezeigt wird und sobald die Maus darüber rollt das gesamte Bild, als Oberlay über den restlichen Inhalt. Sehr trickreich ...
Alles in allem sehr einfach: der umgebende Link wird als Blockelement eingebunden, mit overflow:hidden und position:relative. Das Thumbnail innerhalb des Links bekommt position:absolute sowie eine top- und left-Angabe. Zum Schluss wird der hover-Effekt definiert; er wird via z-index ganz nach oben positioniert und bekommt overflow:visible, womit er sichtbar wird. Zum Testen einfach mit der Maus über das Thumbnail in diesem Absatz rollen.
Nachfolgend der ganze erforderliche CSS-Code:
<style type="text/css" media="screen">>
a.thumb {
display:block;
float:left;
width:60px;
height:50px;
line-height:40px;
overflow:hidden;
position:relative;
z-index:1;
padding: 2px;
border:solid 1px #999;
margin-right: 10px;
}
a.thumb img{
float:left;
position:absolute;
top:-10px;
left:-100px;
}
a.thumb:hover{
overflow:visible;
z-index:1000;
border:none;
}
</style>
Eine genauere Anleitung gibt es im Artikel Create Resizing Thumbnails Using Overflow Property. Der Trick ist funktional in IE 6, Firefox und Safari.
Von Peter am 25.02 um 23:41 Uhr. Kategorie: HTML-CSS
Trackback-URL: http://www.lisardo.biz/trackback/768/UEfKEfMB/