title: add link to rollover script
body: <p>I have a pure css rollover script which is a series of images each held in their own divs and on hover, the background image slides up so the image theoretically changes.</p>
  
  <p>Is it possible to add a link to the image though? The images are contact icons facebook, twitter, website etc. so ideally upon hover the user can click the icon and go to that link.</p>
  
  <p>I figured adding <code>&lt;a ref=........&lt;/a&gt;</code> after and before the div tags would work but that didn't do anything ie. the link isn't recognised and can't be clicked on.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="fbook-hover social-slide"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.social-slide {
  height:300px;
  width: 250px;
  margin: 10px;
  float: left;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  transition: all ease 0.3s;
  }    
  .social-slide:hover {
  background-position: 0px -300px;
  }
  .fbook-hover {
  background-image: url('/images/smedia/fbook.png');
  }
  </code></pre>
  
  <p>JSFIDDLE <a href="http://jsfiddle.net/26B3h/1/" rel="nofollow">http://jsfiddle.net/26B3h/1/</a></p>