Вертикальная мини навигация с элементом трансформации.

[Sleedney]

Здравствуйте решил по кусочкам собрать для себя мини навигацию. Всё получилось ничего сложного.
Возникла проблема с эффектом трансформации он работает не так как мне нужно, а именно.

Трансформация выполняется при клике мышкой т.е --click
Мне бы хотелось чтоб эффект трансформации выполнялся при наведении мышки на объект :hover

LINK ->

Спойлер: css

/* Cкрываем input[type="radio"] */
.radio {
  display: none;
}

/* Стили для кнопок */
.atn {

    margin-bottom: 4px;
    cursor: pointer;
    position: relative;
}

/* Обертка для кнопок */
.list {
  position: relative;
  display: inline-block;
}
/* Перемещающийся блок */
.list:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 25px;
    height: 50px;
    border: 1px solid #9e9e9e9e;
    border-radius: 25px;
    background-color: #6827b01f;
    transition: all .34s ease-in-out;
}


/* "1" */
#sex:checked~.list:after {
  transform: translateY(0%);
}

#sex:checked~.list .btn_on:after {
  opacity: 0;
}
/* "2" */
#asex:checked~.list:after {
  transform: translateY(100%);
}
#asex:checked~.list .btn_off:after {
  opacity: 0;
}

/* "3" */
#gsex:checked~.list:after {
  transform: translateY(200%);
}
#gsex:checked~.list .btn_off:after {
  opacity: 0;
}

/* "4" */
#csex:checked~.list:after {
  transform: translateY(300%);
}
#csex:checked~.list .btn_off:after {
  opacity: 0;
}

Спойлер: HTML

 <div class="fastmenu"style="">
   
   
   
   
   
<form style="margin-top: 15px;">
   
  <input type="radio" name="r" class="radio" id="sex" checked>
  <input type="radio" name="r" class="radio" id="asex">
  <input type="radio" name="r" class="radio" id="gsex">
  <input type="radio" name="r" class="radio" id="csex">  
   

  <div class="list" style="width: 25px;" >
     
<ul>
   
     <li style="margin-top: 10px;"><label class="atn atn_sex" for="sex">
     <i style="font-size: 1.8em;color: #000000d9;padding: 1px;" class="fa fa-home fa-2x" aria-hidden="true"></i>&nbsp;
     </label></li>
   
     <li><label class="atn atn_asex" for="asex">
     <i style="font-size: 1.3em;padding: 3px;color: #000000d9;" class="fa fa-film fa-2x" aria-hidden="true"></i>&nbsp;
     </label></li>
   
     <li><label class="atn atn_gsex" for="gsex">
     <i style="color: #000000d9;font-size: 1.6em;padding: 2px;" class="fa fa-music fa-2x" aria-hidden="true"></i>&nbsp;
     </label></li>
   
     <li><label class="atn atn_csex" for="csex">
     <i style="font-size: 1.5em;padding: 3px;color: #000000d9;" class="fa fa-paint-brush fa-2x" aria-hidden="true"></i>&nbsp;
     </label></li>
   
</ul>
     
  </div>
   
</form>



</div>

Прошу вашей помощи.

Закрепил Видео для полного восприятия проблемы.

Спойлер: полный css

/* Базовые стили */
*,
*:before,
*:after {
  box-sizing: border-box;
}


   li {
    list-style-type: none; /* Убираем маркеры */
   }
   ul {
    margin-left: 0; /* Отступ слева в браузере IE и Opera */
    padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */
   }


.fastmenu {
   
    border-radius: 20px;
    width: 27px;
    margin-left: 1px;
    height: 336px;
    float: right;
    background: #fff;
    border: solid 1px #4b367c1a;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 0px 4px 0 rgba(0, 0, 0, 0.1) !important;

}

/* Cкрываем input[type="radio"] */
.radio {
  display: none;
}

/* Стили для кнопок */
.atn {

    margin-bottom: 4px;
    cursor: pointer;
    position: relative;
}

/* Обертка для кнопок */
.list {
  position: relative;
  display: inline-block;
}
/* Перемещающийся блок */
.list:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 25px;
    height: 50px;
    border: 1px solid #9e9e9e9e;
    border-radius: 25px;
    background-color: #6827b01f;
    transition: all .34s ease-in-out;
}


/* "1" */
#sex:checked~.list:after {
  transform: translateY(0%);
}

#sex:checked~.list .btn_on:after {
  opacity: 0;
}
/* "2" */
#asex:checked~.list:after {
  transform: translateY(100%);
}
#asex:checked~.list .btn_off:after {
  opacity: 0;
}

/* "3" */
#gsex:checked~.list:after {
  transform: translateY(200%);
}
#gsex:checked~.list .btn_off:after {
  opacity: 0;
}

/* "4" */
#csex:checked~.list:after {
  transform: translateY(300%);
}
#csex:checked~.list .btn_off:after {
  opacity: 0;
}

 

[Pokemoshka]

Видео недоступно

 

[Sleedney]

Pokemoshka, у меня работает xD

 

[Tranquillity]

Sleedney, используй лучше https://jsfiddle.net/ для демонстрации
Вот тебе пример https://jsfiddle.net/tovic/ETBLz/

 

[Sleedney]

Tranquillity, правильная ссылка? https://jsfiddle.net/sleedney/jtz15ubb/#&togetherjs=sUeC0FevP8 очень понравилась тама функция выравнивания.