CSS Float:Thumbnail Image Viewer

Titisee Train

Feldsee

Konigsee

Flines

<html>
    <head>
        <style>
            .floatA{position:absolute; border-style:solid;left:38em;
            top:8em;height:30em;width:18em}
            .thumb{float:left;width:8em; height:6em;
            opacity:0.8;filter:alpha(opacity=80); text-align:center;}      
            .thumb img{width:5em;height:5em; opacity:0.8;filter:alpha(opacity:80)}
            .thumb img:hover{opacity:1;filter: alpha(opacity=100)}
            .pic{height:14em;width:18em}
        </style>
    </head>
    <body>
        <div class="floatA">
            <div style="height:16em;background-color:#FFFACD">
               <div class="thumb"><img src="im1.png"/>Titisee Train</div>
               <div class="thumb"><img src="im2.png"/>Feldsee</div>
               <div class="thumb"><img src="im3.png"/>Konigsee</div>
               <div class="thumb"><img src="im4.png"/>Flines</div>
            </div>
            <img src="im1.png"/>    
        </div>
     </body>   
<html>

The class="thumb" declaration causes the image divs to float
The text-align:center specification causes the image and the caption text to be centered
Note the use of the .thumb img:hover pseudo-class and the use of an inline style

In the interests of brevity we have omitted the code that makes the images change. Also, there is some additional code to deliver image blur effects in IE6 which does not fully implement the :hover pseudo-class. See the page source for the full code.

▼Jump To...

◄ ►