Dribbble likeな表現

KEY SENTENCE

[1] 制作イメージ

[2] 実装結果

[3] コーディングサンプル

[1] 制作イメージ

今回はこのようなものを作りたいと思います。

引用元：dribbble

恐れ多くも、かの有名なデザインコミュニティdribbbleのポラロイド風のグリッドレイアウトと見せ方ですね。マウスオーバーでタイトルやキャプションなどを表示させるというシンプルで使い勝手の良い、こちらを参考に自由に作っていきたいと思います。

dribbble like hover effect

実際に実装してみました。イメージとは異なり、色々いじらせてもらいましたが、widthいっぱいに写真をあしらったグリッドレイアウトです。今回はアスペクト比を1:1にして、:hoverで背景画像の拡大、表面にカラーを入れて、title/linkにゅるっと出してみました。

商品一覧や制作事例などに使えそうな感じです。

実際にコーディングにしようした内容

中身が汚いので後日UPします。(笑)

取り急ぎ、こんなところでしょうか。