チャレンジ：
1大きな画像は使用可能なスペースを占有します。
2サムネイルも可能な限り埋めます。
3次の画像を表示するためのマウスクリック（ただし、可能）およびスクロールはありません（サムネイルが画面より大きい場合を除き）。
4キーボードとマウスを使用して表示します。
5スクリプトなし。
6下位互換性を維持しながら。
擬似クラス：hoverおよび：focusが実装用に選択されました
空白は単純です（最初は少し複雑でした）：
<！doctype html>
< html >
< 頭 >
< meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" / >
< タイトル > NoScript Album < / タイトル >
< link rel = "stylesheet" type = "text / css" href = "style2.css" / >
< link rel = "stylesheet" type = "text / css" href = "imgs.css" / >
< ベース ターゲット = "_blank" / >
< / / ヘッド >
< 本体 >
< span class = "cover" > < / / span >
< span class = "hide" >
<a href = "http://kirpich.example.com/imgs/rust/rust_vid-1.jpg" id = "lnk0" class = "lnk">
< span class = "img" > < img src = "http://kirpich.example.com/thmb/rust/rust_vid-1.jpg" alt = "" > < / span >
</a>
<a href = "http://kirpich.example.com/imgs/fjord/fjord_vid-1.jpg" id = "lnk1" class = "lnk">
< span class = "img" > < img src = "http://kirpich.example.com/thmb/fjord/fjord_vid-1.jpg" alt = "" > < / / span >
</a>
<a href = "http://kirpich.example.com/imgs/shater/shater_enter.jpg" id = "lnk2" class = "lnk">
< span class = "img" > < img src = "http://kirpich.example.com/thmb/shater/shater_enter.jpg" alt = "" > < / / span >
</a>
<a href = "http://kirpich.example.com/imgs/osenniy_list/vid1.jpg" id = "lnk3" class = "lnk">
< span class = "img" > < img src = "http://kirpich.example.com/thmb/osenniy_list/vid1.jpg" alt = "" > < / / span >
</a>
<a href = "http://kirpich.example.com/imgs/vsevologsk1.jpg" id = "lnk4" class = "lnk">
< span class = "img" > < img src = "http://kirpich.example.com/thmb/vsevologsk1.jpg" alt = "" > < / / span >
</a>
<a href = "http://kirpich.example.com/imgs/luch/Sertolovo.jpg" id = "lnk5" class = "lnk">
< span class = "img" > < img src = "http://kirpich.example.com/thmb/luch/Sertolovo.jpg" alt = "" > < / / span >
</a>
<a href = "http://kirpich.example.com/921-1_.jpg" id = "lnk6" class = "lnk">
< span class = "img" > < img src = "http://kirpich.example.com/thmb/921-1_.jpg" alt = "" > < / / span >
</a>
<a href = "http://kirpich.example.com/917-1.jpg" id = "lnk7" class = "lnk">
< span class = "img" > < img src = "http://kirpich.example.com/thmb/917-1.jpg" alt = "" > < / / span >
</a>
< / スパン >
< / 本体 >
< / html >
CSSのないこのようなアルバムは「古い方法で」機能し、まともに見えます。
少し変えましょう：
body {
背景色 ： ＃555555 ;
色 ： 白 ;
高さ ： 100 ％ ;
}
.lnk {
表示 ： ブロック ;
フロート ： 左 ;
margin-bottom ： 10px ;
margin-left ： 10px ;
オーバーフロー ： 非表示 ;
}
.lnk .img {
位置 ： 相対 ;
z-index ： 3 ;
margin-bottom ： 10px ;
境界線 ： 1pxの 黒一色 。
オーバーフロー ： 非表示 ;
表示 ： テーブルセル ;
高さ ： 100px ;
垂直整列 ： 中央 ;
背景色 ： ＃555555 ;
}
img {
垂直整列 ： 中央 ;
ボーダー ： 0px ;
幅 ： 100px ;
}
表示する表面を準備します。
.lnk ：ホバー ：後 {
内容 ： "" ;
}
.lnk ：フォーカス 、 .lnk ：ホバー ：after {
背景色 ： ＃555555 ;
background- size ：含む;
バックグラウンド位置 ： 中央 ;
background-repeat ： no-repeat ;
カーソル ： 十字線 ;
}
レイヤーをウィンドウ全体に引き伸ばします：
.cover 、 .lnk ： hover ：after 、 .lnk ：focus {
位置 ： 固定 ;
top ： 0px ;
左 ： 0px 。
幅 ： 100 ％ ;
高さ ： 100 ％ ;
マージン ： 0px ;
}
応答性を維持しながら画像を非表示にします。
。 非表示 ：ホバー。 img {
不透明度： 0.01 ;
フィルター： alpha （ opacity = 1 ） ;
カーソル：十字線;
}
.hideをカバーするため、ホバーは画像でのみ機能します：
.cover {
z-index ： 2 ;
}
.lnkを使用して、他の画像をそれ自体でカバーします。
.lnk ：フォーカス {
z-index ： 4 ;
}
サムネイルを非表示にします。
.lnk ：focus .img {
表示 ： なし ;
}
そして、以下を示します。
.lnk ：フォーカス + .lnk {
位置 ： 固定 ;
下 ： 20px ;
右 ： 0px 。
z-index ： 4 ;
}
透明度を削除します。
.lnk ：focus + .lnk .img {
不透明度： 1 ;
フィルター： alpha （ opacity = 100 ） ;
境界線 ： 1pxの 黒一色 。
}
サムネイルが横にある場合、大きな画像を非表示にします。
.lnk ：フォーカス + .lnk ：後 {
表示 ： なし ;
}
さて、別のファイルに画像をアップロードします：
＃lnk0 ：フォーカス 、 ＃lnk0 ：ホバー ：後 {
background-image ： url （ 'http://kirpich.example.com/imgs/rust/rust_vid-1.jpg' ） ;
}
＃lnk1 ：フォーカス 、 ＃lnk1 ：ホバー ：後 {
background-image ： url （ 'http://kirpich.example.com/imgs/fjord/fjord_vid-1.jpg' ） ;
}
＃lnk2 ：フォーカス 、 ＃lnk2 ：ホバー ：後 {
background-image ： url （ 'http://kirpich.example.com/imgs/shater/shater_enter.jpg' ） ;
}
＃lnk3 ：フォーカス 、 ＃lnk3 ：ホバー ：後 {
背景画像 ： url （ 'http://kirpich.example.com/imgs/osenniy_list/vid1.jpg' ） ;
}
＃lnk4 ：フォーカス 、 ＃lnk4 ：ホバー ：後 {
background-image ： url （ 'http://kirpich.example.com/imgs/vsevologsk1.jpg' ） ;
}
＃lnk5 ：フォーカス 、 ＃lnk5 ：ホバー ：後 {
background-image ： url （ 'http://kirpich.example.com/imgs/luch/Sertolovo.jpg' ） ;
}
＃lnk6 ：フォーカス 、 ＃lnk6 ：ホバー ：後 {
background-image ： url （ 'http://kirpich.example.com/921-1_.jpg' ） ;
}
＃lnk7 ：フォーカス 、 ＃lnk7 ：ホバー ：後 {
background-image ： url （ 'http://kirpich.example.com/917-1.jpg' ） ;
}
残念なことに、ホバーは親に影響を与える可能性があり、要素の隣人にとっても、何も発明されていないようです。
それで、私たちは何をしましたか？
画像のサムネイルを「タッチ」すると、そのフルバージョンが表示され、サムネイルが透明になります。 サムネイルに注目すると、.lnkはサムネイルで覆われ、大きな画像を表示します。
マウスはサムネイルからサムネイルに移動するだけです。
TabまたはShift + Tabを使用したキーボード（オペラ：Ctrl + UpまたはCtrl + Down）。
参照はhtmlbook.ruでした 。
PS Internet Explorerは、この例の機能を完全にはサポートしていません。
PPSは、 移行によりフェードプレビューをソフトにしました。
。 img {
/ * Firefox * /
-moz - transition - property ：不透明度;
-moz - transition - duration ： 2s ;
/ * WebKit * /
-webkit - transition - property ： opacity ;
-webkit - transition - duration ： 2s ;
/ * Opera * /
-o - transition - property ：不透明度;
-o-移行期間： 2秒。
/ *標準* /
遷移プロパティ：不透明度;
移行期間： 2秒。
}