将链接添加到滚动脚本

我有一个纯css滚动脚本,它是一系列图像,每个图像都保存在自己的div中,悬停时,背景图像向上滑动,因此图像理论上会发生变化。

不过,是否可以在图片中添加链接?这些图片是联系人图标facebook、twitter、网站等,因此理想情况下,悬停时用户可以点击图标并转到该链接。

我想添加 <a ref=........</a> 在之后和之前,div标记都可以工作,但这并没有起到任何作用,即链接无法识别,也无法点击。

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

小提琴 http://jsfiddle.net/26B3h/1/