CSS slideshow How do I link each image in my CSS slideshow to a different page

[RCDEV]

I would like to link to a different page for each image in my slideshow. The slideshow rotates correctly but will only link to the last link - link4.php in the example below.

Your help would be greatly appreciated to keep me from pulling all of my hair out! Thank You.

Here’s my code:

CSS

.slider {
  margin: 0;
  width: 180px;
  height: 1504px;
  overflow: hidden;
  position: relative;
}

a {
  position: absolute;
  -webkit-animation: round 16s infinite;
  opacity: 0;
}

img {
  width: 100%;
}

@-webkit-keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

.slider a:nth-child(4) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

.slider a:nth-child(3) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -ms-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

.slider a:nth-child(2) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -ms-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

.slider a:nth-child(1) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

HTML

    <div class="slider">
      <a href="link1.php" target="_parent"><img class='photo' src="http://i.imgur.com/IMiabf0.jpg" alt="img1" /></a>

      <a href="link2.php" target="_parent"><img class='photo' src="http://i.imgur.com/NqCM7jH.jpg" alt="img2" /></a>


      <a href="link3.php" target="_parent"><img class='photo' src="http://i.imgur.com/cjN8Qoa.jpg" alt="img3" /></a>


      <a href="link4.php" target="_parent"><img class='photo' src="http://i.imgur.com/WQ2RS6O.png" alt="img4" /></a>


    </div>

[SamA74]

@RCDEV

in the example below.

I don’t see the example.

[RCDEV]

Sorry, I hit submit before I added the code. The code is there now. Thank You

[SamA74]

You need to also animate the z-index of the links.
Link 4 is always on top, because it is rendered last in the dom.
Opacity, does not make it go away, it just makes it invisible, so it is still covering those beneath it.
Add something like this to the keyframe bit (it doesn’t have to be these numbers)

@-webkit-keyframes round {
  25% {
    opacity: 1;
    z-index: 999;
  }
  40% {
    opacity: 0;
    z-index: -1;
  }
}

[RCDEV]

Thank you very much. That worked.

[SamA74]

Good.
But you may want to add the rest of the pre-fixes for that part too.
As it is, I don’t have it working in Firefox, but it does work in Chrome.

[RCDEV]

Thank You. I wound up doing a JQuery slideshow earlier yesterday.

It didn’t work in Firefox. I will take a look at it next week and will post the Firefox code if I fix it.

Thanks again for your help.