CSS 画像アニメーション効果のサンプルコード（フォトフレーム）

<!-- メイン コンテナー -->
<div class="box">

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

    <!-- 目次 -->
    <div class="box-inner-content">
        <h3 class="title">ウサギ</h3>
    <span class="post">ウェブ開発者</span>
    </div>

</div>

/* 初期化 */
体、
html{
    フォントサイズ: 100%;
}
* {
    パディング: 0;
    マージン: 0;
    ボックスのサイズ: 境界線ボックス;
}
体 {
    背景: #494A5F;
    フォントの太さ: 500;
    フォントサイズ: 1.05em;
    フォント ファミリ: "Microsoft YaHei"、"Segoe UI"、"Lucida Grande"、Helvetica、Arial、sans-serif;
}

/* 外側のコンテナ */
。箱 {
    マージン: 100px 自動;
    幅: 400ピクセル;
    高さ: 400px;
    オーバーフロー: 非表示;
    位置: 相対的;
}
.box:before {
    コンテンツ： "";
    表示: ブロック;
    境界線: 30px実線 rgba(255, 255, 255, 0.3);
    位置: 絶対;
    上: 5px;
    左: 5px;
    下: 5px;
    右: 5px;
    不透明度: 1;
    zインデックス: 2;
    遷移: すべて 0.3 秒、緩和 0 秒。
}
.box:hover:before {
    上: 0;
    左: 0;
    右: 0;
    下部: 0;
    境界線: 10px実線 rgba(255, 255, 255, 0.18);
}
.box:after {
    コンテンツ： "";
    表示: ブロック;
    境界線: 8px 実線 #fff;
    位置: 絶対;
    上: 35px;
    左: 35px;
    下: 35px;
    右: 35px;
    不透明度: 1;
    zインデックス: 1;
    遷移: すべて 0.5 秒、緩和 0 秒。
}
.box:hover:after {
    上: 0;
    左: 0;
    下部: 0;
    右: 0;
    不透明度: 0;
}

/* 写真*/
.box 画像 {
    幅: 100%;
    高さ: 自動;
    変換: スケール(1.2);
    遷移: すべて 0.5 秒、緩和 0 秒。
}
.box:hover画像{
    変換: スケール(1);
}

/* テキストコンテンツ*/
.box .box-inner-content {
    位置: 絶対;
    左: 45px;
    下部: 125px;
    右: 45px;
    テキスト配置: 中央;
    色: #fff;
    不透明度: 0;
    遷移: すべて 0.3 秒、緩和 0 秒。
}
.box:hover .box-inner-content {
    不透明度: 1;
    下: 20px;
    テキストシャドウ: 0 0 10px #000;
}

/* タイトル */
.box .title {
    フォントサイズ: 26px;
    フォントの太さ: 太字;
    マージン: 0;
}

/* 文章*/
.box .post{
    表示: ブロック;
    フォントサイズ: 16px;
    フォントスタイル: 斜体;
    下マージン: 10px;
}