DEMO
MOUNTAIN
ホバーで説明文がせり上がり、画像はゆっくりズームします。
DEMO
CODE
<div class="demo-stage"><div class="cs-card"><img src="https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?w=600&q=70" alt="demo"><div class="cs-body"><div class="cs-title">MOUNTAIN</div><div class="cs-desc">ホバーで説明文がせり上がり、画像はゆっくりズームします。</div></div></div></div>
.demo-stage { display:flex; align-items:center; justify-content:center; padding:2.5rem; }
.cs-card { position:relative; width:260px; height:320px; border-radius:16px; overflow:hidden; cursor:pointer; }
.cs-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.cs-card:hover img { transform:scale(1.09); }
.cs-body { position:absolute; left:0; right:0; bottom:0; padding:1.5rem; background:linear-gradient(transparent, rgba(26,26,26,.95)); color:#fff; transform:translateY(62px); transition:transform .5s cubic-bezier(.4,0,.2,1); }
.cs-card:hover .cs-body { transform:translateY(0); }
.cs-title { font-family:'Oswald',sans-serif; font-size:1.4rem; letter-spacing:.1em; }
.cs-desc { font-size:.8rem; line-height:1.6; opacity:0; transition:opacity .4s ease .15s; margin-top:.5rem; }
.cs-card:hover .cs-desc { opacity:.9; }
AI PROMPT
ホバーで説明文がせり上がる画像カードを作って。.cs-bodyを初期translateY(62px)で隠し、ホバーでtranslateY(0)へ.5s cubic-bezier。説明文はopacity:0→.9を.15s遅延でフェード。画像はホバーでscale(1.09)へ.6s。下部に黒のlinear-gradientを敷いて文字を可読化、overflow:hiddenでクリップ。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
ホバーで画像の上に説明テキストがせり上がるカード。ブログ記事・ポートフォリオのサムネイルに最適。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
商品カード・記事一覧・料金プラン・チームメンバー紹介など、カード型UIの一覧表示に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。