CSSだけで作成する画像にテキストを重ねるあしらい

See the Pen thum+txt01 by tetsuro (@tetsuro) on CodePen.

今回はWebサイトのよくあるあしらいの一つであるサムネイルにテキストを重ねて表示する方法をご紹介します。写真が多いWebサイトなどでよく見ますね。

ロールオーバーのアクションを追加する

See the Pen thum+txt02 by tetsuro (@tetsuro) on CodePen.

ロールオーバーした時のアクションを追加しましょう。ロールーオーバーすると隠れていたテキストが見えるあしらいです。

今回は2行目以降が表示されるようにしているますが、見出しのみを表示し。ロールオーバーすると本文が表示されるというあしらいもよくみますね。

参考にしてみてください。