add link to rollover script

Question

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.

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.

I figured adding <a ref=........</a> 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.

HTML

<div class="fbook-hover social-slide"></div>

CSS

.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');
}

JSFIDDLE http://jsfiddle.net/26B3h/1/

Answer 1

You were doing it right, instead of "ref" you need to use "href"

http://jsfiddle.net/jonigiuro/26B3h/3/

 <a href="http://www.google.com" target="_blank"><div class="fbook-hover social-slide"></div></a>