如何在此纯HTML / CSS幻灯片上添加指向每个图像的链接？

Question

我正在尝试使幻灯片中的图像的行为像链接一样，因此，当用户单击图像时，它将带到该URL。

幻灯片是使用CSS动画制作的。它基于此tutorial。

正如您所看到的，我已经尝试过将其包装在标签中，但是那不起作用，我认为动画正在影响图像用作链接的功能...

我的HTML

<div class="slideshow">
 <figure> 
  <img src="c5.jpg" width="484" height="330" /> 
 </figure> 
 <figure> 
  <img src="14.jpg" width="484" height="330" /> 
 </figure> 
 <figure> 
  <a href="c3.html"><img src="c3.jpg" width="484" height="330"/></a>
 </figure>
 <figure> 
   <img src="c2.jpg" width="484" height="330" /> 
 </figure> 
 <figure> 
   <a href="c12.html"><img src="12.png" width="484" height="330" /></a>
 </figure> 
</div>

我的某些CSS：

.slideshow figure:nth-child(1) {
-webkit-animation: goldfade 20s 16s  infinite;
-moz-animation: goldfade 20s 16s  infinite;
-ms-animation: goldfade 20s 16s infinite;
animation: goldfade 20s 16s infinite;
}

.slideshow figure:nth-child(2) {
-webkit-animation: goldfade 20s 12s infinite;
-moz-animation: goldfade 20s 12s infinite;
-ms-animation: goldfade 20s 12s infinite;
animation: goldfade 20s 12s infinite;
}

@-webkit-keyframes "goldfade" {
0% {
 filter: alpha(opacity=100);
 opacity: 1;
}

18% {
filter: alpha(opacity=100);
opacity: 1;
}

20% {
filter: alpha(opacity=0);
opacity: 0;
}

96% {
filter: alpha(opacity=0);
opacity: 0;
}

100% {
filter: alpha(opacity=100);
opacity: 1;
} 
}

Answer 1

<a href="c13.jpg">
    <img src="c13.jpg">
</a>

Answer 2

<a href='....your link...'>
    <img src='imageName.png'>
</a>

Answer 3

Answer 4