CSSとpng画像でjpg画像をマスク表示してみる

png画像を上のレイヤーとして、下のjpg画像をマスク表示して見ます。
（JsのプラグインやブラウザによってはCSSだけでも出来た様な気がしますが）

1．用意する画像

透過のpng画像

マスクされるjpg画像

2．CSSの記述例

<style type="text/css">
<!--
#photo {
	position: relative;
	display: block;
	width: 152px;
	height: 152px;
	margin:0 auto;
}
#photo .photo-mask{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 152px;
	height: 152px;
	background:url(mask.png);
}
-->
</style>

3．HTMLの記述例

<div id="photo">
        <span class="photo-mask"></span>
        <img src="i01.jpg" alt="" width="152" height="152">
</div>
<!--/photo-->

CSSとpng画像でjpg画像をマスクするデモ

マスク処理された画像を使えば良い様に思いますが、下のjpg画像のポジションをJavaScritptで移動させたりすれば、何か用途もありそうな予感がします。