JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。
最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover
で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。
.photo a.popup:hover {
background-color: #fff;
}
何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。
Comments
自分でもやってみました。ただ画像を複数横に並べたいのとあと重なった時に下の画像が見えてしまうのですが・・・
複数並べると言うことであれば、下記の所を参考にしてみてはいかがでしょうか。
http://host.sonspring.com/hoverbox/
画像を複数横に並べたいのとあと重なった時に下の画像が見えてしまうのを改善したいのですが、初心者なのでもっとわかりやすく教えて下さい。
よろしくお願い致します。