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

浮き上がるシャドウ画像タイル

ホバーすると画像タイルが持ち上がり、影が大きく広がって手前に浮き出るような演出です。WordPressのカードグリッドやニュース一覧で立体感を出したいときに使えます。

hovercss3d

プレビュー

ソースコード

HTML

<div class="d07-11-08-tile"></div>

CSS

.d07-11-08-tile{width:200px;height:150px;border-radius:12px;background:linear-gradient(135deg,#0ba360,#3cba92);box-shadow:0 4px 10px rgba(0,0,0,.16);transition:transform .3s ease,box-shadow .3s ease}
        .d07-11-08-tile:hover{transform:translateY(-10px) scale(1.03);box-shadow:0 22px 36px rgba(0,0,0,.28)}

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