CSS3 で実装された画像ホバートグルボタン

<ul class="スライド">
    <input type="radio" name="radio-btn" id="img-1" チェック済み />
    <li class="slide-container">
		<div class="スライド">
			<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-6" class="prev">&#x2039;</label>
			<label for="img-2" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="スライド">
          <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-1" class="prev">&#x2039;</label>
			<label for="img-3" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="スライド">
          <img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-2" class="prev">&#x2039;</label>
			<label for="img-4" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="スライド">
          <img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-3" class="prev">&#x2039;</label>
			<label for="img-5" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="スライド">
          <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-4" class="prev">&#x2039;</label>
			<label for="img-6" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-6" />
    <li class="slide-container">
        <div class="スライド">
          <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-5" class="prev">&#x2039;</label>
			<label for="img-1" class="next">&#x203a;</label>
		</div>
    </li>

    <li class="nav-dots">
      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
      <label for="img-5" class="nav-dot" id="img-dot-5"></label>
      <label for="img-6" class="nav-dot" id="img-dot-6"></label>
    </li>
</ul>

@import url(https://fonts.googleapis.com/css?family=Varela+Round);

html、本文 { 背景: #333 url("https://codepen.io/images/classy_fabric.png"); }

.スライド{
    パディング: 0;
    幅: 609ピクセル;
    高さ: 420px;
    表示: ブロック;
    マージン: 0 自動;
    位置: 相対的;
}

.スライド * {
    ユーザー選択: なし;
    -ms-user-select: なし;
    -moz-user-select: なし;
    -khtml-ユーザー選択: なし;
    -webkit-user-select: なし;
    -webkit-touch-callout: なし;
}

.スライド入力 { 表示: なし; }

.slide-container { 表示: ブロック; }

.スライド{
    上: 0;
    不透明度: 0;
    幅: 609ピクセル;
    高さ: 420px;
    表示: ブロック;
    位置: 絶対;

    変換: スケール(0);

    遷移: すべて .7 のイーズイン アウト。
}

.スライド画像{
    幅: 100%;
    高さ: 100%;
}

.nav ラベル {
    幅: 200ピクセル;
    高さ: 100%;
    表示: なし;
    位置: 絶対;

	  不透明度: 0;
    zインデックス: 9;
    カーソル: ポインタ;

    遷移: 不透明度 .2 秒;

    色: #FFF;
    フォントサイズ: 156pt;
    テキスト配置: 中央;
    行の高さ: 380px;
    フォントファミリー: "Varela Round"、サンセリフ;
    背景色: rgba(255, 255, 255, .3);
    テキストシャドウ: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { 不透明度: 0.5; }

.nav ラベル:hover { 不透明度: 1; }

.nav .next { 右: 0; }

入力:チェック済み + .slide-container .slide {
    不透明度: 1;

    変換: スケール(1);

    遷移: 不透明度 1 秒、イーズインアウト;
}

入力:チェック済み + .slide-container .nav ラベル { 表示: ブロック; }

.nav-dots {
	幅: 100%;
	下: 9px;
	高さ: 11px;
	表示: ブロック;
	位置: 絶対;
	テキスト配置: 中央;
}

.nav-dots .nav-dot {
	上: -5px;
	幅: 11px;
	高さ: 11px;
	マージン: 0 4px;
	位置: 相対的;
	境界線の半径: 100%;
	表示: インラインブロック;
	背景色: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
	カーソル: ポインタ;
	背景色: rgba(0, 0, 0, 0.8);
}

入力#img-1:チェック済み ~ .nav-dots ラベル#img-dot-1,
入力#img-2:チェック済み ~ .nav-dots ラベル#img-dot-2,
入力#img-3:チェック済み ~ .nav-dots ラベル#img-dot-3,
入力#img-4:チェック済み ~ .nav-dots ラベル#img-dot-4,
入力#img-5:チェック済み ~ .nav-dots ラベル#img-dot-5,
入力#img-6:チェック済み ~ .nav-dots ラベル#img-dot-6 {
	背景: rgba(0, 0, 0, 0.8);
}