Чистый CSS3 слайдер изображение HTML

<div class="gendesin">  
  <input type="radio" id="control1" name="controls" checked="checked"/>
  <label for="control1"></label>
  <input type="radio" id="control2" name="controls"/>
  <label for="control2"></label>
  <input type="radio" id="control3" name="controls"/>
  <label for="control3"></label>
  <input type="radio" id="control4" name="controls"/>
  <label for="control4"></label>
  <input type="radio" id="control5" name="controls"/>
  <label for="control5"></label>
  <div class="coevbusinesen">
  <ul>
  <li>
  <img src="http://zornet.ru/ABVUN/Aba/5.jpg" />
  <div class="cordingagend">
   
  <div class="cordingagend-text">
  <h2>Ключевое слово 1</h2>
  <p>Около десяти лет назад SEO не было чем-то обыденным или даже чем-то, что считалось необходимостью для бизнеса.</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/ABVUN/Aba/4.jpg" />
  <div class="cordingagend">
   
  <div class="cordingagend-text">
  <h2>Здесь написано название 2</h2>
  <p>Сегодня вещи очень разные. Согласно статье, опубликованной в журнале Forbes, услуги SEO необходимы сегодня для бизнеса.</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/ABVUN/Aba/3.jpg" />
  <div class="cordingagend">
   
  <div class="cordingagend-text">
  <h2>Название слайд-шоу 3</h2>
  <p>Некоторые из причин этого включают охват, экономическую эффективность и тот факт, что в настоящее время это маркетинговая норма.</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/ABVUN/Aba/2.jpg" />
  <div class="cordingagend">
   
  <div class="cordingagend-text">
  <h2>ZorNet.Ru — сайт для вебмастера</h2>
  <p>Для тех из вас, кому неясно, что мы подразумеваем под метриками или KPI, мы говорим о стандартах успеха SEO, которые можно измерить и, следовательн.</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/ABVUN/Aba/1.jpg" />
  <div class="cordingagend">
   
  <div class="cordingagend-text">
  <h2>Скрипты для сайта</h2>
  <p>Это относится к числу посещений или посещений, которые вы получаете на своем веб-сайте посредством общего просмотра веб-страниц.</p>
  </div>
  </div>
  </li>
  </ul>
  </div>
  </div>

h1 {color:#333; text-shadow:1px 1px #999; font-size:40px; font-family:Archivo Narrow; margin:40px; text-align:center;}
.gendesin {
  display: block;
  height: 320px;
  min-width: 260px;
  max-width: 640px;
  margin: auto;
  margin-top: 20px;
  position: relative;
}
   
.coevbusinesen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
   
.coevbusinesen>ul {
  list-style: none;
  height: 100%;
  width: 500%;
  overflow: hidden;
  position: relative;
  left: 0px;
  -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
   
.coevbusinesen>ul>li {
  width: 20%;
  height: 320px;
  float: left;
  position: relative;
}
   
.coevbusinesen>ul>li>img {
  margin: auto;
  height: 100%;
}
   
.gendesin input[type=radio] {
  position: absolute;
  left: 50%;
  bottom: 15px;
  z-index: 100;
  visibility: hidden;
}
   
.gendesin label {
  position: absolute;
  left: 50%;
  bottom: -45px;
  z-index: 100;
  width: 12px;
  height: 12px;
  background-color:#ccc;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
  box-shadow: 0px 0px 3px rgba(0,0,0,.8);
  -webkit-transition: background-color .2s;
  -moz-transition: background-color .2s;
  -o-transition: background-color .2s;
  transition: background-color .2s;
}
   
.gendesin input[type=radio]#control1:checked~label[for=control1] { background-color: #333; }
.gendesin input[type=radio]#control2:checked~label[for=control2] { background-color: #333; }
.gendesin input[type=radio]#control3:checked~label[for=control3] { background-color: #333; }
.gendesin input[type=radio]#control4:checked~label[for=control4] { background-color: #333; }
.gendesin input[type=radio]#control5:checked~label[for=control5] { background-color: #333; }
.gendesin label[for=control1] { margin-left: -36px }
.gendesin label[for=control2] { margin-left: -18px }
.gendesin label[for=control4] { margin-left: 18px }
.gendesin label[for=control5] { margin-left: 36px }
.gendesin input[type=radio]#control1:checked~.coevbusinesen>ul { left: 0 }
.gendesin input[type=radio]#control2:checked~.coevbusinesen>ul { left: -100% }
.gendesin input[type=radio]#control3:checked~.coevbusinesen>ul { left: -200% }
.gendesin input[type=radio]#control4:checked~.coevbusinesen>ul { left: -300% }
.gendesin input[type=radio]#control5:checked~.coevbusinesen>ul { left: -400% }
   
.cordingagend {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-family:Archivo Narrow;
  z-index: 1000;
}
.cordingagend-text {
  background-color: rgba(0,0,0,.8);
  padding:10px;
  top: 0;
  z-index: 4;
  -webkit-transition: opacity .2s;
  -moz-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;
  color: #fff;
}