CSS

HTML/CSSと少しjQueryで作るモダンな画像のリンク

こんにちは、どうもうすです。

WEB勉強中なのでモダンかどうかはわからないですが、最近の画像リンクでおしゃれな感じのデザインは、以下のようなものが多くないでしょうか。

モダンぽい画像リンクCSSデザイン
  • 角が丸くてカードっぽく見える
  • 影をつける
  • どんな画像のサイズでもcssで指定されたサイズに画像を中央に隙間なく合わせる
  • hoverで暗くなる
  • hoevrで文字が浮き出てくる
  • hoverで影が濃くなり浮いたように見える
  • hoverで画像が拡大される

完成品

codepenでアウトプットしておくので煮るなり焼くなりしてください!

ほとんどHTML/CSSでやったのですがどうしても無理なところ(画像とmaskが被っているところ)があってそこだけ少しjQueryを使わせていただきました。

See the Pen image-hover0001 by yusk24 (@yusk24) on CodePen.

画像をクリックすると縦長や横長のフリー画像が現れると思います。

画像の大きさに左右されないデザインをあるサイト参考にすることでできました。

また、maskというアイデアもあるサイトを参考にしました。

そしてflexboxを使っているのでwidthに合わせて画像リンクが縦や横に並んだりします。

画像の大きさを変えるときは、maskの上の文字の「line-height: 167px;」って場所も変えてあげてください。

感想

やりたかったことができたのですごく気持ちがいいです。実際すぐに使う場面はないかもしれないですが、割とかっこいい感じのデザインなのでまたいつか使うと思います。

デザインは、いろんなものを作ったりするとすごく参考になります。

一つ言えることは、違う人が作ったものどおしを合体させる作業はものすごく疲れます。しかし、コピーだけで終わるんじゃなくて改造するところまでがゴールだと思います。

もっと色々なデザインを学んでいきます。今後ともよろしくお願いいたします。

参考