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

回転しながら拡大する円形サムネイル

丸型フレームの画像がホバー時にわずかに回転しつつ拡大する、遊び心のあるズーム演出です。WordPressのメンバー紹介やアイコン風ギャラリーにアクセントとして使えます。

hovercss3d

プレビュー

ソースコード

HTML

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

CSS

.d07-11-03-frame{position:relative;width:170px;height:170px;border-radius:50%;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.16)}
        .d07-11-03-img{width:100%;height:100%;background:linear-gradient(135deg,#ff9a56,#ff5e62);transition:transform .5s ease}
        .d07-11-03-frame:hover .d07-11-03-img{transform:scale(1.16) rotate(10deg)}

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