Besoin de faire <td> les tags dans les liens externes en utilisant HTML5 et CSS3

Question

Je suis en train de permettre aux visiteurs de cliquer sur un lien à l'intérieur d'une table qui utilise CSS3 animation des classes...je n'arrive pas à obtenir le DIV de l'image d'arrière-plan pour devenir un lien...voir ci-dessous HTML et CSS3...

Je voudrais faire de chaque <td> dans une cliquable lien externe...

J'ai essayé d'entourer le <td> avec un <a> tag...essayé de mettre la <a> balise à l'intérieur de la <td> tag...

merci pour votre aide...

Veuillez voir ce violon - 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

Si vous avez juste un lien à l'intérieur de chacun et de définir le style suivant sur ce que vous obtenir l'effet désiré.(vous pouvez définir ce style comme faisant partie d'une classe css et ensuite définir chacun des liens pour avoir la classe pour rendre les choses plus lisible)

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