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

円形フレームホバーリビールギャラリー

丸型サムネイルにホバーすると外周のリングが浮かび上がり中身がわずかに拡大回転。WordPressのスタッフ紹介やSNSアイコン一覧に軽やかな動きを添えます。

galleryhovercss3d

プレビュー

ソースコード

HTML

<div class="d07-01-11-row">
          <div class="d07-01-11-circle"><span>🌵</span></div>
          <div class="d07-01-11-circle"><span>🌙</span></div>
          <div class="d07-01-11-circle"><span>🍂</span></div>
        </div>

CSS

.d07-01-11-row{display:flex;gap:16px}
        .d07-01-11-circle{position:relative;width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fb923c,#f472b6);cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.15)}
        .d07-01-11-circle span{font-size:34px;transition:transform .35s ease}
        .d07-01-11-circle::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;transform:scale(.85);transition:border-color .35s ease,transform .35s ease}
        .d07-01-11-circle:hover::after{border-color:#fff;transform:scale(1)}
        .d07-01-11-circle:hover span{transform:scale(1.15) rotate(8deg)}
        .d07-01-11-circle:nth-child(2){background:linear-gradient(135deg,#818cf8,#38bdf8)}
        .d07-01-11-circle:nth-child(3){background:linear-gradient(135deg,#34d399,#facc15)}

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