パーツ番号 08-01-04 ・ CSSのみ

スケール＆ブラーリビール

縮小＋ぼかし状態から、ピントが合うようにくっきり拡大表示。WordPressのメインビジュアルやギャラリー画像の登場演出に効果的です。

css

プレビュー

ソースコード

HTML

<figure class="ph08-01-04 io-reveal">
          <div class="img08-01-04"></div>
          <figcaption>ぼかしからくっきり</figcaption>
        </figure>

CSS

.d08-01-04{background:#111827;}
        .d08-01-04 .ph08-01-04{
          margin:0;width:230px;text-align:center;
          opacity:0;transform:scale(.8);filter:blur(10px);
          transition:opacity .8s ease,transform .8s cubic-bezier(.22,.9,.3,1),filter .8s ease;
        }
        .d08-01-04 .ph08-01-04.is-in{opacity:1;transform:scale(1);filter:blur(0);}
        .d08-01-04 .img08-01-04{
          height:140px;border-radius:12px;
          background:
            radial-gradient(circle at 70% 30%,rgba(255,255,255,.35),transparent 45%),
            linear-gradient(135deg,#38bdf8,#818cf8 55%,#c084fc);
          box-shadow:0 16px 36px rgba(56,120,248,.35);
        }
        .d08-01-04 .ph08-01-04 figcaption{margin-top:12px;font-size:12.5px;color:#cbd5e1;letter-spacing:.08em;}

クラス名 .d08-01-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。