【CodePen】カードホバーエフェクトのアイデア10選

💡 実装のポイント
.containerにperspective: 1000px、.front・.backにtransform .7s cubic-bezier(0.4, 0.2, 0.2, 1)を設定したシンプルなフリップ構成。.colごとに独立しているのでカード枚数の増減も容易。スマホ対応としてontouchstart="this.classList.toggle('hover')"がHTML側に直書きされているため、タッチデバイスではこの記述ごと持っていく必要がある点に注意。

💡 実装のポイント
.card-front・.card-backそれぞれにbackface-visibility: hiddenを設定し、ホバー時にrotateY(180deg)で表裏を切り替える定番構成。6枚のカードはli:first-child〜li:last-child（nth-child）で背景色を個別指定しているので、色数を増やす場合はセレクタの追加が必要。Foundationのグリッドクラスに依存した実装のため、抜き出す際はレイアウト部分の書き換えが前提になる。

💡 実装のポイント
.cardにperspective: 1000px、内側の.card-innerにtransform-style: preserve-3dを持たせ、ホバーで.card-innerごとrotateY(180deg)させる構成。.card-front・.card-backはbackface-visibility: hiddenで裏側を隠しているだけなので、面ごとのデザイン差し替えがしやすい。SCSSのネスト記法（&-inner等）で書かれているため、素のCSSとして使う場合はコンパイル後のクラス名（.card-inner等）を確認する必要がある。

💡 実装のポイント
mix-blend-mode: color-dodgeを使った疑似要素（::before＝グラデーション層、::after＝キラキラ画像＋グラデーション層）の重ね合わせでホログラム感を出している。マウス位置はJS側で座標を計算しbackground-positionとopacityをインラインstyleで動的に書き換える仕組みなので、動きの調整はJSの計算式側に手を入れる必要がある。カードごとの色は--color1〜--color5のCSSカスタムプロパティで管理されており、配色差し替えは比較的簡単。

💡 実装のポイント
ガラス質感は.cardへのbackdrop-filter: blur(10px)と半透明のbackground: rgba(255,255,255,0.057)だけで再現。チルト（傾き）の動きはCSSではなく外部ライブラリvanilla-tilt.jsが担っており、HTML側のdata-tilt・data-tilt-glare属性で挙動を制御している。JS側にロジックの記述はなく、ライブラリの読み込みと属性指定だけで動く手軽な構成。

💡 実装のポイント
.cardにperspective: 2500pxを設定し、ホバー時に.wrapper（背景画像）だけをrotateX(25deg) translateZ(0)で傾ける仕組み。タイトル画像・キャラクター画像はtranslate3dで手前に飛び出すように動かしており、レイヤーごとに動きの深さを変えているのがポイント。--card-heightのカスタムプロパティ1つでカード全体のサイズを比率維持したまま調整できる。

💡 実装のポイント
通常時は.contentをtranslateY(calc(100% - 4.5rem))でタイトルだけ見える位置まで下げておき、ホバーでtranslateY(0)に戻して本文とボタンを表示する仕組み。@media (hover: hover)でホバー可能なデバイスのみに演出を限定しているのがポイントで、タッチデバイスでは常に全文表示になるよう配慮されている。背景画像はSCSSの@eachループでnth-childごとに割り当て。HTML側はPugで書かれているため、素のHTMLとして使うには変換が必要。

💡 実装のポイント
カードごとの色は.education・.credentialing等のクラスに定義した--bg-color・--bg-color-light・--box-shadow-colorのカスタムプロパティで一括管理。ホバー時は円形の.overlay要素をscale(4)で拡大させて背景色を塗り替える演出で、JSは一切使っていない。色違いのカードを増やす場合は、同じ変数セットを持つクラスを追加するだけでよい設計。

💡 実装のポイント
外部ライブラリSplittingJSで見出しを文字単位、本文を単語単位に分割し、それぞれに付与される--char-index・--word-indexを使ってCSS側でtransition-delayをずらすことで、1文字（1単語）ずつ浮かび上がる演出を実現している。上下2本の疑似要素（::before・::after）をscaleXで伸縮させるカバー演出と組み合わせているのがポイント。ライブラリ依存のため、抜き出す際はSplittingJSの読み込みも忘れずに。

💡 実装のポイント
重なった.imgBox（画像）と.content（テキスト）をホバー時にそれぞれ逆方向へtranslateさせ、ずれを作るだけのシンプルな構成。JSは使われておらずCSSのみで完結している。@media (max-width: 600px)でスマホ時は横方向のずれをなくし縦方向のみの動きに変更しており、レスポンシブ対応の書き方の参考になる。