<div class="slider">
  <div class="overlay"></div>
  <input type="radio" id="sbutton1" name="sradio">
  <label for="sbutton1"></label>
  <input type="radio" id="sbutton2" name="sradio">
  <label for="sbutton2"></label>
  <input type="radio" id="sbutton3" name="sradio">
  <label for="sbutton3"></label>
  <input type="radio" id="sbutton4" name="sradio">
  <label for="sbutton4"></label>
  <ul>
    <li><img src="http://i2.cdn.turner.com/money/dam/assets/141001144835-innovative-cities-philly-1024x576.jpg"></li>
    <li><img src="https://b.fastcompany.net/multisite_files/coexist/imagecache/1280/poster/2012/11/1680856-poster-1280-10-smartest-european-cities-shutterstock-78340003-1.jpg"></li>
    <li><img src="http://www.worldatlas.com/r/w728-h425-c728x425/upload/d9/63/b0/most-populous-cities-in-oceania.jpg"></li>
    <li><img src="http://media.cntraveler.com/photos/57adedf97516fb180520de91/16:9/w_1024,c_limit/friendliest-burlington-GettyImages-157614212.jpg"></li>
  </ul>
</div>

*,*:before,*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.slider {
  background-color: rgba(0, 0, 0, .5);
  margin: auto;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-flow: column-reverse nowrap;
  overflow: hidden;
}
.slider ul {
  width: 100%;
  flex: 1;
  display: flex;
  list-style: none;
  //overflow: hidden;
  order: 1;
  transition: all 0.9s;
  animation: slider 20s infinite;
}
.slider ul li {
  flex: 0 0 100%;
  height: 100%;
}
.slider ul li img {
  height: 100%;
  width: 100%;
}
input[type="radio"] {
  display: none;
}
input[type="radio"]+label {
  bottom: 50px;
  display: block;
  cursor: pointer;
  height: 60px;
  left: calc(50% - 90px);
  opacity: 0;
  position: absolute;
  order: 2;
  transition: all .3s ease;
  visibility: hidden;
  width: 60px;
  z-index: 3;
}
input[type="radio"]+label:hover {
  transition: .3s;
  opacity: .7;
}
#sbutton1+label {
  background: url(http://i2.cdn.turner.com/money/dam/assets/141001144835-innovative-cities-philly-1024x576.jpg);
  background-size: cover;
}
#sbutton2+label {
  background: url(https://b.fastcompany.net/multisite_files/coexist/imagecache/1280/poster/2012/11/1680856-poster-1280-10-smartest-european-cities-shutterstock-78340003-1.jpg);
  background-size: cover;
  left: calc(50% - 30px);
}
#sbutton3+label {
  background: url(http://www.worldatlas.com/r/w728-h425-c728x425/upload/d9/63/b0/most-populous-cities-in-oceania.jpg);
  background-size: cover;
  left: calc(50% - -30px);
}
#sbutton4+label {
  background: url(http://media.cntraveler.com/photos/57adedf97516fb180520de91/16:9/w_1024,c_limit/friendliest-burlington-GettyImages-157614212.jpg);
  background-size: cover;
  left: calc(50% - -90px);
}
#sbutton1:checked~ul {
  margin-left: 0;
  animation: none;
}
#sbutton2:checked~ul {
  margin-left: -100%;
  animation: none;
}
#sbutton3:checked~ul {
  margin-left: -200%;
  animation: none;
}
#sbutton4:checked~ul {
  margin-left: -300%;
  animation: none;
}
@keyframes slider {
  0%,
  20% {
    margin-left: 0;
  }
  25%,
  40% {
    margin-left: -100%;
  }
  45%,
  70% {
    margin-left: -200%;
  }
  72%,
  100% {
    margin-left: -300%;
  }
}
.overlay {
  background-color: rgba(0, 0, 0, .5);
  left: 0;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all .3s ease;
  visibility: hidden;
  width: 100%;
  z-index: 2;
}
.slider:hover .overlay {
  opacity: 1;
  visibility: visible;
}
.slider:hover > input[type="radio"] + label {
  opacity: 1 ;
  visibility: visible;
}