title: Changing Opacity with jQuery
body: <p>I have 9 items on a grid, I want all items to have 0.5 opacity on every item and only when hovered over should the div/item and everything inside have 1.0 opacicty.</p>
  
  <p>Here is the JS</p>
  
  <pre><code>$('.gallery-single').css({ opacity: 0.5 });
  
  $('.gallery-single a').mouseover(function(){
      $('.gallery-single-title', this).css('display', 'block');
          $('.gallery-single', this).css({ opacity: 1 });
  });
  $('.gallery-single a').mouseout(function(){
      $('.gallery-single-title', this).css('display', 'none');
          $('.gallery-single', this).css({ opacity: 0.5 });
  }); 
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="gallery-single"&gt;
  &lt;a href="#" title=""&gt;
  &lt;div class="gallery-single-title hide"&gt;Some text goes here&lt;/div&gt;
  &lt;div class="gallery-single-img"&gt;&lt;img src="http://img.youtube.com/vi/code/0.jpg" width="300" height="200" /&gt;&lt;/div&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>All items are at opacity 0.5 when loaded but opacities are not changed when focused.
  What am I doing wrong here?</p>