title: Changing Radio Select
body: <p>Alright so I have a radio button slide show that I made with some simple CSS and HTML, but now I need it to change once every 3 seconds, but I still want it to be able to change by checking a radio button...</p>
  
  <p>Here is my Css code</p>
  
  <pre><code>.photo {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 800px;
      height: 300px;
      opacity: 0;
      transition: all 1s;
      z-index: -1;
  }
  
  .container {
      position: relative;
      width: 800px;
      height: 300px;
      overflow: hidden;
      margin: 10px;
      text-align: center;
  
  }
  
  
  
  input[type=radio]:checked ~ .photo {
      transition: all 1s;
          opacity: 100;
  }
  
  .photo1 {
          position: absolute;
          bottom: 0;
      right: 52%;
  }
  .photo2 {
          position: absolute;
          bottom: 0;
      right: 50%;
  
  }
  .photo3 {
          position: absolute;
          bottom: 0;
      right: 48%;
  }
  </code></pre>
  
  <p>and here is my html code </p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;form class="container"&gt;
  &lt;table&gt;
  &lt;/tr&gt;
  &lt;td&gt;
  &lt;input type="radio" name="photo" class="photo1" checked="true"&gt;
  &lt;img src="Footloose.png" class="photo"&gt;
  &lt;/td&gt;
  
  &lt;td&gt;
  &lt;input type="radio" name="photo" class="photo2" &gt;
  &lt;img src="Shrek.jpg" class="photo"&gt;
  &lt;/td&gt;
  
  &lt;td&gt;
  &lt;input type="radio" name="photo" class="photo3" &gt;
  &lt;img src="LegallyBlond.jpg" class="photo"&gt;
  &lt;/td&gt;
  &lt;/form&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I'm new to Java and Javascript, and when I tried, it didn't work. Thank you for your help in advance!</p>