マウスホバーで画像の中身が浮き上がる

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

CSSの解説

<img class="hover-up" src="画像のURL">

/***非ホバー時***/
.hover-up{
  transition: .3s; /*0.3秒かけて変化*/
}

/***ホバー時***/
.hover-up:hover{
  filter: drop-shadow(6px 12px 6px rgba(0,0,0,35%)); /*非透過部分に影*/
  transform: translateY(-4px); /*上に4px移動*/
}

• imgタグに.hover-upクラスを付与
• .hover-upにtransitionを指定して、動きを滑らかにする
• ホバー時.hover-up:hoverに浮き上がる動作を追加
  • filter: drop-shadowで下方向に影を付ける（off-set-yは正の値）
  • transform: translateY()で任意の数だけ上に移動させる（マイナス値を入れる）

ホバー時のみdrop-shadowで影を付けて上に移動させることで、浮き上がったように見せています。

リンクaタグとの併用がおすすめですが、クラスをaタグに付与してもtransform: translateY()はホバー時のimgタグに指定しましょう。（aタグに指定すると画像が上に移動しません）

応用CSS

背景あり

背景画像を付ける際は、background-imageを親要素（divなど）に必ず付与するようにしましょう。imgタグに直接背景を付けることも可能ですが、その場合は drop-shadow などの画像編集プロパティが背景画像にも適用されてしまいます。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

立体的に(z方向に)浮き上がる

全体的な影（オフセットxy共に0）を付けてtransform: scale()で拡大することで、立体芳香（z軸方向）に浮き上がったように見せています。仕組み的にはマウスホバーで浮き沈みするテキストと同じです。

平面的な画像には向いていますが、向きが付いているような立体的画像には不向きかもしれません。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.