はじめに

高林哲さんが作成されたzphotoというフリーソフトウェアがあります。
このソフトウェアを使用して手元でアルバムを作成して楽しんでいたのですが、

今時のCSSを使えば似た感じの物が作れるのではないか？

と考えて試行錯誤した所、簡易的にですが再現できました。

簡易実装

animation.css


img.graphic {
  z-index: 0;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
}

img.graphic:hover {
  z-index: 999;
  -moz-transform: scale(2.0, 2.0);
  -webkit-transform: scale(2.0, 2.0);
  -o-transform: scale(2.0, 2.0);
  -ms-transform: scale(2.0, 2.0);
}

animation.html

<head>
<link rel="stylesheet" href="animation.css" type="text/css" media="all">
</head>

<body>
<a href="hoge.html"><img class="graphic" src="hoge.jpg" title="2014/01/01 00:00:00"/></a>
</body>

あとはtable使うなり適当に。

zphotoのCSSによる簡易実装

はじめに

簡易実装