カードシャイン通過

解説

カードシャイン通過は、マウスを乗せると斜めの光沢が左から右へ一度だけ走り抜けるホバー演出です。カード本体の ::before 疑似要素に半透明から白へ抜けるグラデーションの帯を仕込み、:hover 時に left を画面外から反対側まで transition で移動させて実現しています。overflow:hidden で帯をカード内に収め、はみ出した部分を隠すのがポイントです。

使う場面

• 料金プランや特典カードを目立たせ、クリックを促したいとき
• サムネイルやバナーに高級感のある反応を足したいとき
• ボタンやCTAに上質な手触りを加えたいとき

光沢の強さは ::before のグラデーション内 rgba(255,255,255,.35) の透明度で調整できます。速さは transition:left .6s の秒数で変わり、角度を変えたいときは linear-gradient の 120deg を編集します。追加スクリプトが不要なので導入は手軽ですが、装飾目的の演出のため、情報を伝える役割は持たせずあくまで補助に留めるのが安全です。

使用例・適したシーン

• ナビゲーションのインタラクティブ装飾
• ギャラリーのホバーリビール
• サービスカードの強調