title: :focus on a img
body: <p>I have a portfolio that works fine but I'm currently building a CMS for it so that I can simply upload the image and it adds it to the site for me. Before I build it, I'm rebuilding some of the scrappy code and converting the what was a JS powered gallery to a CSS powered one.</p>
  
  <p>I'm trying to achieve this click effect in CSS. <a href="http://www.tomdwyerdesign.com/graphics/" rel="nofollow">http://www.tomdwyerdesign.com/graphics/</a> </p>
  
  <p>I thought I could do it via the :focus selector but I've run into a little problem.</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;a class="tile" href="#"&gt;
          &lt;img src="images/thumbs/DLPWD.png" class="dlpwd" /&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>and this is the CSS:</p>
  
  <pre><code>.tile:focus img{
  background-image: url("images/large/DLPWD.png");
  width: 771px;
  height: 600px;
  }
  </code></pre>
  
  <p>It doesn't seem to select it properly. Any one know why?</p>
  
  <p>Thanks.</p>