Need to make <td> tags into external links using HTML5 and CSS3

Question

I am trying to allow visitors to click on a link inside a table that uses CSS3 animation classes...I can't seem to get the DIV background image to become a link...see below HTML and CSS3...

I would like to make each <td> into a clickable external link...

I have tried to surround the <td> with an <a> tag...tried to put the <a> tag inside the <td> tag...

thanks for your help...

Please see this fiddle - jsFiddle

HTML:

<div id="partner_holder">

<table width="75%" height="100%" border="1" cellspacing="2" cellpadding="2">
  <tr>
  <td class="showbox slideright"><div id="partner_holder_1"></div></td>
    <td class="showbox slideright"><div id="partner_holder_2"></div></td>
  </tr>
  <tr>
    <td class="showbox slideright"><div id="partner_holder_3"></div></td>
    <td class="showbox slideright"><div id="partner_holder_4"></div></td>
  </tr>
  <tr>
    <td class="showbox slideright"><div id="partner_holder_5"></div></td>
    <td class="showbox slideright"><div id="partner_holder_6"></div></td>
  </tr>
</table>
</div>

CSS:

#gallery_holder
{
    width:90%;
    margin-top:5%;
    margin-left:15%;
    color:white;
    height:450px;
    background:none;

}

#gallery_holder_1
{
    width:100%;
    height:100%;
    margin-top:0%;
    background: url(../images/pic1.png);
    overflow:none;
    background-repeat: no-repeat;
    background-size:100% 100%;
  }

.showbox {

    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
  }
  .showbox.slideright:hover {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
  }


#gallery_holder_2
{
    width:100%;
    height:100%;
    margin-top:0%;
    background: url(../images/pic2.png);
    overflow:none;
    background-repeat: no-repeat;
    background-size:100% 100%;
}

#gallery_holder_3
{
    width:100%;
    height:100%;
    margin-top:0%;
    background: url(../images/pic3.png);
    overflow:none;
    background-repeat: no-repeat;
    background-size:100% 100%;
}

#gallery_holder_4
{
    width:100%;
    height:100%;
    margin-top:0%;
    background: url(../images/pic4.png);
    overflow:none;
    background-repeat: no-repeat;
    background-size:100% 100%;
}

#gallery_holder_5
{
    width:100%;
    height:100%;
    margin-top:0%;
    background: url(../images/pic5.png);
    overflow:none;
    background-repeat: no-repeat;
    background-size:100% 100%;
}

#gallery_holder_6
{
    width:100%;
    height:100%;
    margin-top:0%;
    background: url(../images/pic6.png);
    overflow:none;
    background-repeat: no-repeat;
    background-size:100% 100%;
}

Answer 1

If you just have a link inside each and set the following style on it you get the desired effect. (you could set this style as part of a css class and then set each of the links to have that class to make things neater)

<td>
    <a style="width:100%;height:100%;display:block" href="www.yourlink.com">
        Link
    </a>
</td>