パーツ番号 07-11-01 ・ CSSのみ

ホバーでゆっくり拡大するサムネイル

マウスを乗せるとフレーム内の画像だけがゆっくり拡大する基本のズーム演出です。WordPressの商品一覧やブログのサムネイルグリッドにそのまま使えます。

css

プレビュー

ソースコード

HTML

<div class="d07-11-01-frame">
          <div class="d07-11-01-img"></div>
        </div>

CSS

.d07-11-01-frame{position:relative;width:220px;height:150px;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.14)}
        .d07-11-01-img{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);transition:transform .6s ease}
        .d07-11-01-frame:hover .d07-11-01-img{transform:scale(1.18)}

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