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

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

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

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

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