ジャケット画像のポップアップ #4

Posted at 2005-08-23T12:13:00+09:00 in Web Design

まだやってんのかという感じですが、まだやってます。今回は、段落の左肩にfloatさせた小さめの画像を配置するという、いわゆるアサマシ・エントリでありがちな形をまず想定し、その画像にマウスをあわせたら「ポップアップ！」というもの。全身全霊で「クリックしてくれ！」感を演出するメソッドです。

アサマシ・エントリ向けということで、以前書いたBloc Party / Silent Alarmというエントリの内容を利用して動作サンプルを作成してみました。

今回はコードの細かい説明は省きます。たいしたことはやってないので。ただ、Internet Explorerの場合、:hover擬似クラスでoverflowプロパティの値をscrollにセットしてやらないとうまいこと動きませんでした。なぜそうすると動くのかもわからないとかいう。

4つのエントリに渡っていろいろとやってみたわけですが、マウス・オーバーでポップアップのやり方は大体把握したような感じです。うまいことまとめることが出来たらPure CSS Image Popupとか名前をつけてエントリを書いてみよーかなーとか。

追記

一連のポップアップネタは、HTMLとCSSのみで構成されています。JavaScriptやらDHTMLやらHTML+TIME(関係ない)やらAjax(もっと関係ない)は利用しておりません。厳選した素材の味を引き出すシンプルなものです。