画像一枚だけで写真を重ねたようにするチュートリアル | コリス

シンプルなHTMLで画像を配置し、:before, :after疑似要素を使って、写真を重ねたようなエフェクトにするチュートリアルを紹介します。 重ねたエフェクトはホバー時にCSS3アニメーションします。 デモページ ※ホバー時のアニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルです。 ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> [ad#ad-2] CSS スタイルシートは4つのデモのキャプチャと共に、紹介します。 まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:before, :afterを使用します。 .stack { position: relative; z-index

[umegaemotch]

画像一枚だけで写真を重ねたようにするチュートリアル

[prototechno]

メモ

[orangewaffle]

画像一枚だけで写真を重ねたようにするチュートリアル | コリス

[susi-paku]

よくやる手法だからメモメモ！('A')っ｜[CSS]画像一枚だけで写真を重ねたようにするチュートリアル

[sugarshin]

from コリス http://coliss.com

[iuhya]

これはいいね。

[Donca]

✔ [CSS]画像一枚だけで写真を重ねたようにするチュートリアル