Pure CSS Slider W/ Image Change on Hover

Question

I have a client for whom I've created the site http://StudyUp.com. At the top of the page we've made a slider that uses pure CSS to swap between the images. Today, the client asked if we could have the images change on radio button hover, or start automatically sliding through.

As far as I'm aware, this just ain't possible without jQuery, which we've been trying to avoid. However, if you've got anything to add, I'm all ears and very appreciative! Figured I'd ask the hive mind before deciding it was futile. If you know a quick jQuery fix I'm open to it, as well.

HTML for Slider is:

<div id="slider">
        <ul class="slider">
<li>
<input type="radio" id="slide1" name="slide" checked>
<a href="#"><label for="slide1"></label></a>
<img src="/images/Slide1.png" />
</li>
<li>
<input type="radio" id="slide2" name="slide">
<a href="#"><label for="slide2"></label></a>
<img src="/images/Slide2.png" />
</li>
<li>
<input type="radio" id="slide3" name="slide">
<a href="#"><label for="slide3"></label></a>
<img src="/images/Slide3.png" />
</li>
<li>
<input type="radio" id="slide4" name="slide">
<a href="#"><label for="slide4"></label></a>
<img src="/images/Slide4.png" id="slide4img" />
</li>
</ul>
    </div>

This here's the CSS for the sonoffagun:

/*This here's the CSS for that there slider*/
#slider {
  bottom:2%;
  left: -4%;
  margin: 0 auto;
  position: relative;
  top:65px;
  z-index: 15;
}
.slider. {
-webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
height:580;
width: 1020px;
}
.slider li {
    -webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
list-style: none; 
position:absolute;
}
.slider img {
    -webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
  margin: 0 auto;
height:580;
width:1020px;
vertical-align: top;
}

.slider input {
display: none;
}
.slider label {
background-color:#69d2e7;
bottom: 8px;
cursor: pointer;
display: block;
height: 20px;
position:absolute; 
width: 20px; 
border-radius: 10px;
z-index: 10; 

-webkit-transition: background-color 0.15s ease-in-out;
-moz-transition: background-color 0.15s ease-in-out;
-o-transition: background-color 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out;
}
.slider li a:hover label {
  background-color: #297cab;
}

.slider li a:hover label:after  {
  background-color: #297cab;
}


.slider li:nth-child(1) label {
margin-bottom: 1.1%;
left: 40%;
} 
.slider li:nth-child(2) label { 
margin-bottom: 1%;
left: 45%;
}
.slider li:nth-child(3) label {
margin-bottom: 1%;
left: 50%;
}
.slider li:nth-child(4) label {
margin-bottom: 1%;
left: 55%; 
}
.slider img {
opacity: 0; 
visibility: hidden;
}

.slider li input:checked ~ img {
opacity: 1; 
visibility: visible; 
z-index: 10; 
}

Answer 1

You can attain a mouseover image transition by changing :checked event to :hover in your su-home.css, line no: 202

.slider li input:hover ~ img {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

Answer 2

Use this. It's Chris Coyer's solution. Very very simple and lightweight.

http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

Good luck!