title: Linking an image to a URL within a <img class>
body: <p>I have a big problem. I included a "fade script" on my portfolio which fades between thumbnails in my portfolio using jQuery and CSS. Unfortunately it's based on 2 img classes which I'm unable to link.</p>
  
  <p>In other words I like to link the image green.jpg to a URL (in this case a youtube clip in a lightbox).</p>
  
  <p>Anyone know how to solve  this?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="item"&gt;
              &lt;div id="cf"&gt;
                &lt;a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption"&gt;
                  &lt;img class="bottom" src="img/green.jpg" border="0" /&gt;
                &lt;/a&gt;
                &lt;img class="top" src="img/a_childish_letter.jpg" /&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#cf {
    position:relative;
    height:200px;
    width:310px;
    margin:0 auto;
  }
  
  #cf img {
    position:absolute;
    left:0;
    -webkit-transition: opacity .7s ease-in-out;
    -moz-transition: opacity .7s ease-in-out;
    -o-transition: opacity .7s ease-in-out;
    transition: opacity .7s ease-in-out;
    cursor:pointer;
  }
  
  #cf img.top:hover {
    opacity:0;
  }
  </code></pre>
  
  <p>Thanks a lot! And if it's to any help you can check out the page at <a href="http://www.axeltagg.com/test/" rel="nofollow">http://www.axeltagg.com/test/</a></p>
  
  <p>Best regards! /Axel</p>