CSSでつくるhover時に画像の中身だけが拡大されるリンクカード

HTML/CSS

ブログなどで見かける、カード状になっていて、画像とテキストがあるリンク。
マウスオーバー時に画像のサイズは変わらずに、画像の中身だけが拡大されるリンクカードをhtml/cssで作ったので記述例などを紹介します。

記述例の紹介

画像自体のサイズが変わらないように画像に「overflow: hidden;」を設定しておき、hover時に画像を「transform: scale(1.1);」で拡大させています。
(コードは「html」「css」のボタンを押して確認してみてください。)

See the Pen
NWqEmeN
by saku (@web-saku)
on CodePen.

アレンジの紹介

hover時に追加で少し暗めのフィルターをかけて、文字が表示されるように少しアレンジを加えてみました。
フィルターと文字は擬似要素を使って表示させています。

See the Pen
poJqJXO
by saku (@web-saku)
on CodePen.

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください