title: Change opacity on hover
body: <p>How do I make it so that the opacity is normal until someone hovers over it and when they hover over it the picture lights up but sends the other images to the background? I also want the images to fade in and out.</p>
  
  <p><a href="http://www.gazelle.com/" rel="nofollow">Example</a></p>
  
  <p>Here's the <a href="http://jsfiddle.net/Cx35C/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code>img { 
  opacity: 0.7; 
  } 
  
  img:hover { 
  opacity: 1; 
  }
  .radio div[type='radio'] {
  background: transparent;
  border:0px solid #dcdcdc;
  border-radius:10px;
  padding:0px;
  display: inline-block;
  margin-left: 5px;
  cursor:pointer;
  text-align: left;
  opacity: 0.7;
  }
  .radio div:hover[type='radio'] {
  opacity: 1; 
  }
  </code></pre>
  
  <p>That opacity is fine but I want the images to have their normal opacity until someone hovers over it.</p>