Слайдер с простой функцией анимации CSS3

<section id="pesekon_snimka_css">
<ul class="kalomeguss">
  <input type="radio" name="radio-btn" id="img-1" checked="">
  <li class="kalomegus-container">
  <div class="kalomegus">
  <img src="Ссылка на изображение №1">
  </div>
  <div class="nav">
  <label for="img-6" class="prev">‹</label>
  <label for="img-2" class="next">›</label>
  </div>
  </li>

  <input type="radio" name="radio-btn" id="img-2">
  <li class="kalomegus-container">
  <div class="kalomegus">
  <img src="Ссылка на изображение №2">
  </div>
  <div class="nav">
  <label for="img-1" class="prev">‹</label>
  <label for="img-3" class="next">›</label>
  </div>
  </li>

  <input type="radio" name="radio-btn" id="img-3">
  <li class="kalomegus-container">
  <div class="kalomegus">
  <img src="Ссылка на изображение №3">
  </div>
  <div class="nav">
  <label for="img-2" class="prev">‹</label>
  <label for="img-4" class="next">›</label>
  </div>
  </li>

  <input type="radio" name="radio-btn" id="img-4">
  <li class="kalomegus-container">
  <div class="kalomegus">
  <img src="Ссылка на изображение №4">
  </div>
  <div class="nav">
  <label for="img-3" class="prev">‹</label>
  <label for="img-5" class="next">›</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>
  </li>
</ul>
</section>

#pesekon_snimka_css .kalomeguss{
padding:0;
width:609px;
height:420px;
display:block;
margin:0 auto;
position:relative}

#pesekon_snimka_css .kalomeguss *{
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none}

#pesekon_snimka_css .kalomeguss input{
display:none}

#pesekon_snimka_css .kalomegus-container{
display:block}

#pesekon_snimka_css .kalomegus{
top:0;
opacity:0;
width:609px;
height:420px;
display:block;
position:absolute;
transform:scale(0);
transition:all .7s ease-in-out}

#pesekon_snimka_css .kalomegus img{
width:100%;
height:100%}

#pesekon_snimka_css .nav label{
width:200px;
height:100%;
display:none;
position:absolute;
opacity:0;
z-index:9;
cursor:pointer;
transition:opacity .2s;
color:#FFF;
font-size:156pt;
text-align:center;
line-height:380px;
background-color:rgba(255,255,255,.3);
text-shadow:0 0 15px #777}

#pesekon_snimka_css .kalomegus:hover+.nav label{
opacity:.5}

#pesekon_snimka_css .nav label:hover{
opacity:1}

#pesekon_snimka_css .nav .next{
right:0}

#pesekon_snimka_css input:checked+.kalomegus-container .kalomegus{
opacity:1;
transform:scale(1);
transition:opacity 1s ease-in-out}

#pesekon_snimka_css input:checked+.kalomegus-container .nav label{
display:block}

#pesekon_snimka_css .nav-dots{
width:100%;
bottom:9px;
height:11px;
display:block;
position:absolute;
text-align:center}

#pesekon_snimka_css .nav-dots .nav-dot{
top:-5px;
width:11px;
height:11px;
margin:0 4px;
position:relative;
border-radius:100%;
display:inline-block;
background-color:rgba(0,0,0,.6)}

#pesekon_snimka_css .nav-dots .nav-dot:hover{
cursor:pointer;
background-color:rgba(0,0,0,.8)}

#pesekon_snimka_css input#img-1:checked~.nav-dots label#img-dot-1,#pesekon_snimka_css input#img-2:checked~.nav-dots label#img-dot-2,#pesekon_snimka_css input#img-3:checked~.nav-dots label#img-dot-3,#pesekon_snimka_css input#img-4:checked~.nav-dots label#img-dot-4,#pesekon_snimka_css input#img-5:checked~.nav-dots label#img-dot-5,#pesekon_snimka_css input#img-6:checked~.nav-dots label#img-dot-6{
background:rgba(0,0,0,.8)}