[CSS]WP用JS使わずに画像にマウスオーバーした時にキャプションを表示させるやつテスト

  • js使いたくない
  • 言うほどの装飾はいらない
  • CSS3使っても問題ない

みたいな前提のとき用。

文字で説明すると、とりあえず画像が表示されてる。
それにカーソルを乗せると薄い黒でオーバーレイがかかって白地のテキストが表示される。
加えて画像全体がリンクになってる。

注意点とか
<a>はトリガー用でしかないので強制的に非表示にしてる。
複数<a>入れても一個しか適用されない。
表示されるテキストのところは、<p>以外も使って細分化したかったら、
それ用の親を作る必要がある。
作らなかったらブロックが重なる。
まあ下位置にしてる弊害だから、左上基準にしていいなら問題ないんだけどね。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする