コーディング

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

2016.08.31

2017.05.29

あっかんべする女の子

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

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

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

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

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

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

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

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。