Beispielcode zur Implementierung des Bildschubladeneffekts mit CSS3

<div>
        <ul id="Liste">
            <li>
                <a href="">Internationale Beauty-Vorschau</a>
                <img src="bilder/1.jpg" />
            </li>
            <li>
                <a href="">Göttin Standarddiskussion</a>
                <img src="bilder/2.jpg" />
            </li>
            <li Klasse="Auswählen">
                <a href="">Auch Feinschmecker können abnehmen, je mehr sie essen</a>
                <img src="bilder/3.jpg" />
            </li>
            <li>
                <a href="">Kleid sorgt für Schlagzeilen</a>
                <img src="bilder/4.jpg" />
            </li>
            <li>
                <a href="">Gong San Heldin-Schönheits-Showdown</a>
                <img src="bilder/5.jpg" />
            </li>
        </ul>
    </div>

*{ Rand:0;Padding:0; }
    ul{ Listenstil: keine; }
    eine {Schriftgröße: 16px;Textdekoration: keine;Farbe: #666;}
    div{ Breite:300px;Margin:20px auto; }
    #Liste li{ Zeilenhöhe: 40px; Höhe: 40px; Hintergrund: #efefef; Texteinzug: 1em; Rand unten: 3px; Überlauf: ausgeblendet; -webkit-Übergang: Höhe 0,3 s Leichtigkeit; -moz-Übergang: Höhe 0,3 s Leichtigkeit-ms-Übergang: Höhe 0,3 s Leichtigkeit; -o-Übergang: Höhe 0,3 s Leichtigkeit; Übergang: Höhe 0,3 s Leichtigkeit;}
    #Liste li img{ Breite:300px;Höhe:200px;}
    #Liste li:nth-child(1){height:240px;background:#F36;}
    #Liste li:n-tes Kind(1) a{ Farbe:#fff; }
    #Liste:hover li{ Höhe:40px;Hintergrund:#efefef; }
    #list:hover li a{color:#666;}
    #Liste li:hover{ Höhe:240px; Hintergrund:#F36;}
    #Liste li:hover a{ Farbe:#fff; }