CSSでつくるhover時に画像の中身だけが拡大されるリンクカード
ブログなどで見かける、カード状になっていて、画像とテキストがあるリンク。
マウスオーバー時に画像のサイズは変わらずに、画像の中身だけが拡大されるリンクカードを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.
Ads
おすすめの書籍紹介
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す