cssのみでライトボックスエフェクトを実現するにはどうすればいいですか？利用可能な例

Question

http://www.w3css.co.uk/ 

ウェブサイトでは、ターゲットを使用しないと言います。ソースを見て、私が見ることができる限り、jsはありません。どうやって 。小さなフィーリンの例や説明は非常に高く評価されます。ありがとうございます。

Answer 1

サムネイルで使用されているCSSセレクタは:focusと:activeのセレクタで、アンカーをクリックすると適用されます（IE互換の場合はアクティブ、Firebugの場合は表示されます）。

これらのセレクタには、潰れた画像をフルサイズに拡大するCSSトランジションがあるだけです。別の要素をクリックすると明らかに:focusが失われ、ライトボックスが消えます。また、タブキーを使用してナビゲートすることもできます。そうすることで、アンカー間のフォーカスを切り替えるだけで、CSSトランジションを再度アクティブにすることができます。

Answer 2

CSS3の遷移についての記事を読む（thisリンクは良い説明を持っている）、それはCSSプロパティの変更をアニメーション化する方法を提供し、代わりに変更は即座に有効になり有するので、このサイトでは、それ

Answer 3

を使用して達成することができるいくつかの効果を実証

ライトボックスを開くために起動しているイベントがフォーカスイベントです。これはまた、タブまたはシフトタブを押して画像を切り替えることができる理由です。 Neilが述べたように、あなたはcssファイルで詳細を見つけることができます。

サイトをロードしてタブボタンを押してピクチャの1つにピントを合わせるだけで、ライトボックスも開きます。

Answer 4

:active IEの疑似クラスに非IEのための:focusがあります。