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

Question

I'm trying make images in a slideshow behave like links, so when user clicks on the image it will take them to that url.

The slideshow is made using css animations. It's based on this tutorial .

As you can see I already tried wrapping it in an tag but that doesn't work, I think the animation is affecting the images ability to work as a link...

My 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>

Some of my 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

wrap the image tags with an anchor tag and provide the href attribute your desired link.Then your image will act like a link.That might serve your purpose

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

Answer 2

change the href to the img's src property, if you're trying to open the image:

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

Answer 3

I am seeking to do the same thing, but neither answer above seems to work. The example given above already has each <img> surrounded with an anchor. When I try wrapping each image with a unique anchor, only the last anchor defined works.

Answer 4

Add anchor tag in all slider_images for providing link:

<a href='link of page that you want to open'>
    <img src='image.jpg'>
</a>