CSS3 で画像ドロワー効果を実装するためのサンプル コード

<div>
        <ul id="リスト">
            <li>
                <a href="">国際ビューティープレビュー</a>
                <img src="images/1.jpg" />
            </li>
            <li>
                <a href="">女神標準ディスカッション</a>
                <img src="images/2.jpg" />
            </li>
            <li class="select">
                <a href="">食通でも食べれば体重は減る</a>
                <img src="images/3.jpg" />
            </li>
            <li>
                <a href="">ドレスが注目を集める</a>
                <img src="images/4.jpg" />
            </li>
            <li>
                <a href="">ゴンサンヒロイン美の対決</a>
                <img src="images/5.jpg" />
            </li>
        </ul>
    </div>

*{ マージン:0; パディング:0; }
    ul{ リストスタイル:なし; }
    a{ フォントサイズ:16px; テキスト装飾:なし; 色:#666; }
    div{ 幅:300px; 余白:20px 自動; }
    #list li{ line-height:40px;height:40px;background:#efefef;text-indent:1em; margin-bottom:3px;overflow:hidden;-webkit-transition:height 0.3s easy;-moz-transition:height 0.3s easy-ms-transition:height 0.3s easy;-o-transition:height 0.3s easy;transition:height 0.3s easy;}
    #リスト li img{ 幅:300px; 高さ:200px; }
    #リスト li:nth-child(1){高さ:240px;背景:#F36;}
    #リスト li:nth-child(1) a{ color:#fff; }
    #list:hover li{ 高さ:40px; 背景:#efefef; }
    #list:hover li a{color:#666;}
    #リスト li:hover{ 高さ:240px; 背景:#F36;}
    #list li:hover a{ color:#fff; }