Music × Picture 3

"Music × Picture" screenshot mosaic on Flickr http://j.mp/1tSJBi5

"Music × Picture" ( mouseover ) http://j.mp/1wI6sdD

Music × Picture 2

続き

YouTubeを抱く猫の背景画像の下に、それぞれの絵の拡大画像を、更なる背景画像として配置した。#art #painting

初期表示ではうっすら見える、上層の背景画像をマウスオーバー(hover)すると、猫とYouTube部分がクリアに浮かび上がる。再生スタート後、hoverを止めると画像のみ初期表示に戻る。

透明化については、CSS(カスケーディング・スタイルシート)にて、透明度に関する"opacity" Property を加えた。
まだ不明な点も多く、ブラウザによっては、まともに表示されないことがあるかもしれない。その場合は、Google Chrome の使用を推奨。
もう少しCSS全般に習熟した後は、メイン画像の上に完全に透明な形で潜ませたいと思っている。

また上記画像の作成には、前回の投稿 Label × Menu - 1stブログ閲覧ガイド にて作成したマトリクスから Label "Music” × Menu "Sidebar" を使用した。

尚、上記画像には無いが、2ndブログにも反映。