p要素の中に複数の画像をimgタグで挿入します。
通常なら横並びに画像が並ぶはずです。
ここでimg要素にposition : absoluteを設定します。
位置は特に指定をしません。
そうするとimgで挿入した画像がきれいに重なります。
後は画像のサイズを少しずつ変えてみるとか、JavaScriptで動かすなど工夫しだいです。
1 |
<p><img src="cake1.jpg" width="480" height="360"><img src="cake2.jpg" width="480" height="360"><img src="cake3.jpg" width="480" height="360">a</p> |
1 2 3 4 5 6 7 |
img { position: absolute; } p{ width:480px; margin:auto; } |