title: Trigger image transition by hovering over a text link
body: <p>OK, I'm a complete rookie and have gleemed the coding I have so far from various resources online and adapted it to suit my needs, so be gentle :P</p>
  
  <p>Basically, I have a nice CSS transition happening when hovering over an image. However, I want to put a text link beneath said image, that will trigger the same image transition when you hover over the text link. Is this possible? I've been searching for a result for some time now and still not cracked this one! </p>
  
  <pre><code>CSS
  
  a.home:link {color:#040404; text-decoration:none; font-weight:bold;   font-family:"Lucida Console", Monaco, monospace; font-size:18px;}
  a.home:visited {color:#040404; text-decoration:none; font-weight:bold; font-family:"Lucida Console", Monaco, monospace; font-size:18px;}
  a.home:hover {color:#E5712C; text-decoration:none; font-weight:bold; font-family:"Lucida Console", Monaco, monospace; font-size:18px;}
  a.home:active {color:#5F5F5F; text-decoration:none; font-weight:bold; font-family:"Lucida Console", Monaco, monospace; font-size:18px;}
  
  
  
  #crossfade
  {
  position: relative;
  width: 200px;
  height: 200px;
  border: solid 2px #5f5f5f;
  border-radius: 8px;
  box-shadow: 0px 10px 5px #888888;
  }
  
  #crossfade img
  {
  position:absolute;
  left:0;
  opacity: 1;
  -webkit-transition: opacity 0.8s ease-in-out;
  -moz-transition: opacity 0.8s ease-in-out;
  -o-transition: opacity 0.8s ease-in-out;
  -ms-transition: opacity 0.8s ease-in-out;
  transition: opacity 0.8s ease-in-out;
  }
  
  #crossfade img.top:hover {
  opacity:0;
  }
  
  
  HTML
  
  &lt;div id="crossfade"&gt;
  &lt;img class="bottom" src="http://www.officialdrivingtheory.co.uk/wp-content/uploads/TheoryTest-question.jpg"&gt;&lt;a href="http://www.livingthai.org/wp-content/uploads/2011/10/How-to-test-your-Thai-Language-ability.jpg"&lt;/a&gt;
  &lt;img class="top" src="http://www.dandybooksellers.com/acatalog/PracticalTest.jpg"/&gt;&lt;a href="http://www.livingthai.org/wp-content/uploads/2011/10/How-to-test-your-Thai-Language-ability.jpg"&lt;/a&gt;
  
  &lt;/div&gt;&lt;/br&gt;
  &lt;a class ="home" href="http://www.livingthai.org/wp-content/uploads/2011/10/How-to-test-your-Thai-Language-ability.jpg"&gt;TESTING&lt;/a&gt;
  </code></pre>
  
  <p>You can see what I'm trying to do here: <a href="http://jsfiddle.net/WxVE4/1/" rel="nofollow">http://jsfiddle.net/WxVE4/1/</a></p>
  
  <p>I've just used placeholder images and links for now as my site isn't published yet.</p>
  
  <p>Oh, and if anyone can tell me how to align the text link nice and centrally beneath the image then that's extra brownie points :D</p>