CSSだけで作る画像ギャラリー[CSS]

devirtuoso.comより、スクリプト設置なしでCSSだけで作る画像ギャラリーの紹介です。

デモページはこちらから

サイトには、設置方法が記載されています。下図がまさにそのイメージ図です。

css0908011.jpg

以下がマークアップ例です。

HTML

<div id="wrapper">
<!-- Tabs -->
<ul>
   <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li>
   <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li>
   <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li>
   <li><a href="#image4" id="tab4"><img src="tab4.jpg" alt="" title="" /></a></li>
</ul>
       
<!-- Images -->
<div id="images">
  <div><a name="image1"></a><img src="image1.jpg" alt="" title="" /></div>
  <div><a name="image2"></a><img src="image2.jpg" alt="" title="" /></div>
  <div><a name="image3"></a><img src="image3.jpg" alt="" title="" /></div>
  <div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div>
</div>
</div>

CSS

/* CSS Reset */
    * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
    }
       
    /* Setup Tabs */
   
    ul{
        background:#000;
        width:125px; /* Width of Tab Image */
        float: left;
        list-style: none;
        border-right:8px solid black;
    }
   
    ul li{
        height:75px; /* Height of Tab Image */
    }
   
    /* Setup Tab so normal opacity is 40 and rollover is 100 */
    ul li a img{
        /* for IE */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
        filter:alpha(opacity=40);
     
        /* CSS3 standard */
        opacity:0.4;
     
    }
   
    /* Change Opacity to 100% on roll over */
    ul li a:hover img{
         
        /* for IE */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter:alpha(opacity=100);
       
        /* CSS3 standard */
        opacity:1.0;
    }

    /* Places images to the right of the tabs,
    and hides non selected images */
    #images{
        width:500px;
        height:300px;
        overflow:hidden;  /* Hides the non selected images */
        float:left;
    }
   
    /* Places a black border around the entire viewer
    and centers it on the screen */
    #wrapper{
        width:633px;
        height:300px;
        border:8px solid black;
        margin:0px auto;
    }