تحتاج إلى إنشاء علامات <td> في روابط خارجية باستخدام HTML5 وCSS3

Question

أحاول السماح للزائرين بالنقر على رابط داخل جدول يستخدم فئات الرسوم المتحركة CSS3...يبدو أنني لا أستطيع الحصول على صورة خلفية DIV لتصبح رابطًا...انظر أدناه HTML وCSS3...

أود أن أجعل كل منهما <td> إلى رابط خارجي قابل للنقر عليه...

لقد حاولت أن أحيط <td> مع ال <a> العلامة...حاولت وضع <a> علامة داخل <td> بطاقة شعار...

شكرا لمساعدتك...

من فضلك شاهد هذا الكمان - jsFiddle

لغة البرمجة:

<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

إذا كان لديك رابط داخل كل منها وقمت بتعيين النمط التالي عليه، فستحصل على التأثير المطلوب.(يمكنك تعيين هذا النمط كجزء من فئة CSS ثم تعيين كل رابط من الروابط للحصول على تلك الفئة لجعل الأمور أكثر دقة)

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