DEMO
DEMO
CODE
<div class="demo-stage"><div class="izm"><img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&q=70" alt="demo"></div></div>
.demo-stage { display:flex; align-items:center; justify-content:center; padding:2rem; }
.izm { width: 280px; height: 280px; overflow: hidden; border-radius: 12px; clip-path: circle(45% at 50% 50%); transition: clip-path .8s cubic-bezier(.4,0,.2,1); cursor: pointer; }
.izm:hover { clip-path: circle(70% at 50% 50%); }
.izm img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.izm:hover img { transform: scale(1.1); }
AI PROMPT
画像にホバーするとclip-pathの円が拡大しながら、画像自体も1.1倍にズームインする効果を作って。circle(45%)からcircle(70%)へ、transition .8s cubic-bezierで滑らかに。border-radius:12px、object-fit:cover、cursor:pointerも。レスポンシブで動くこと。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
ホバー時に画像をクリッピングマスクで広げながらズーム表示する効果。Webサイトのギャラリー・カード演出に。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
ナビゲーション・リンク・サムネイル・カードなど、マウスを乗せた要素のフィードバックに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。