Beispielcode für CSS-Bildanimationseffekte (Fotorahmen)

<!-- Hauptcontainer -->
<div Klasse="Box">

    <!-- Bild -->
    <img src="images/pic.png" alt=""/>

    <!-- Inhalt -->
    <div Klasse="Box-Inneninhalt">
        <h3 class="title">Kaninchen</h3>
    <span class="post">Webentwickler</span>
    </div>

</div>

/* Initialisierung */
Körper,
html {
    Schriftgröße: 100 %;
}
* {
    Polsterung: 0;
    Rand: 0;
    Box-Größe: Rahmenbox;
}
Körper {
    Hintergrund: #494A5F;
    Schriftstärke: 500;
    Schriftgröße: 1,05em;
    Schriftfamilie: „Microsoft YaHei“, „Segoe UI“, „Lucida Grande“, Helvetica, Arial, serifenlos;
}

/* Äußerer Container */
.Kasten {
    Rand: 100px automatisch;
    Breite: 400px;
    Höhe: 400px;
    Überlauf: versteckt;
    Position: relativ;
}
.box:vor {
    Inhalt: "";
    Anzeige: Block;
    Rand: 30px durchgezogener RGBA (255, 255, 255, 0,3);
    Position: absolut;
    oben: 5px;
    links: 5px;
    unten: 5px;
    rechts: 5px;
    Deckkraft: 1;
    Z-Index: 2;
    Übergang: alle 0,3 s, Leichtigkeit 0 s;
}
.box:hover:vor {
    oben: 0;
    links: 0;
    rechts: 0;
    unten: 0;
    Rand: 10px durchgezogener RGBA (255, 255, 255, 0,18);
}
.box:nach {
    Inhalt: "";
    Anzeige: Block;
    Rand: 8px durchgezogen #fff;
    Position: absolut;
    oben: 35px;
    links: 35px;
    unten: 35px;
    rechts: 35px;
    Deckkraft: 1;
    Z-Index: 1;
    Übergang: alle 0,5 s, 0 s langsam;
}
.box:hover:nach {
    oben: 0;
    links: 0;
    unten: 0;
    rechts: 0;
    Deckkraft: 0;
}

/* Bild*/
.box img {
    Breite: 100 %;
    Höhe: automatisch;
    transformieren: Skalierung (1,2);
    Übergang: alle 0,5 s, 0 s langsam;
}
.box:hover img {
    transformieren: Skalierung(1);
}

/* Textinhalt*/
.box .box-innerer-Inhalt {
    Position: absolut;
    links: 45px;
    unten: 125px;
    rechts: 45px;
    Textausrichtung: zentriert;
    Farbe: #fff;
    Deckkraft: 0;
    Übergang: alle 0,3 s, Leichtigkeit 0 s;
}
.box:hover .box-innerer-inhalt {
    Deckkraft: 1;
    unten: 20px;
    Textschatten: 0 0 10px #000;
}

/* Titel */
.box .titel {
    Schriftgröße: 26px;
    Schriftstärke: fett;
    Rand: 0;
}

/* Text*/
.box .post{
    Anzeige: Block;
    Schriftgröße: 16px;
    Schriftstil: kursiv;
    Rand unten: 10px;
}