画像にマウスオーバーするとテキストがニュッと出てくるやり方 | 佐賀でふらふり

会員制サイトを作った時に実装した画像とテキストの見せ方。 真新しい方法ではなくてよく見るやつです。 メリットとしては、限られたスペースの中でテキスト情報を与えることができるのと、レイアウトが崩れにくい点ですかね。 デメリットとすれば、マウスオーバーしてもらわないとテキスト情報がわからない。 ざっとした確認ですが、一応iPhoneならワンクリックでテキスト表示、ツークリック目でリンク移動となるようです。 では、以下そのやり方。 目次の前に、とりあえずデモ。 デモはこちら 目次 HTMLを準備 CSSを準備 jQueryを準備 完成 おまけ HTMLを準備 まずは基本となるHTMLを準備します。 テキストと画像があればいいんですが、今回はブログに掲載されている画像とそのタイトルという設定でいきます。 適当にコーディングしてもらえばいいんですが、僕は一応関連性あるものはdlで囲むのが好きなのでそ