Search code examples
csssasscss-animationshrefkeyframe

Not being redirected to the right link of <a> in a slide animation

AIM

When clicking on the Unsplash credit badge I want the user to go to the author's picture link.

PROBLEM

Although the right badges are shown with their respective pictures during the transition when clicking on any of the three badges of this animation, it's always the link of slide-3 that the user is redirected to. However, the right link is included in the href of each of the three slides. It seems that the last link, i.e. the link of the last slide (slide-3) is cashed and completely ignores the previous two links despite the right badge being shown...

How could this be solved?

Please note that the credit badge code was provided by Unsplash.

CODE

body {
  margin: 0;
  padding: 0;
}

.slide {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}

.slide-1 {
background-image: url("https://images.unsplash.com/photo-1580118797218-2413f9d2e36b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=1778&q=80");
animation: fade1 10s infinite;
}
.slide-2 {
background-image: url("https://images.unsplash.com/photo-1558981420-c532902e58b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1754&q=80");
animation: fade2 10s infinite;
}
.slide-3 {
background-image: url("https://images.unsplash.com/photo-1581071727451-75cf45dc1bb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80");
animation: fade3 10s infinite;
}

@keyframes fade1 {
  0% {
    opacity: 0;
  }

  33% {
    opacity: 1;
  }
}

@keyframes fade2 {
  33% {
    opacity: 0;
  }

  67% {
    opacity: 1;
  }
}

@keyframes fade3 {
  67% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
<body>

  <div class="slide slide-1">
    <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@robertbahn?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Robert Bahn"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Robert Bahn</span></a>
  </div>

  <div class="slide slide-2">
    <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@harleydavidson?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Harley-Davidson"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Harley-Davidson</span></a>
  </div>

  <div class="slide slide-3">
    <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@mbuff?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Sung Jin Cho"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Sung Jin Cho</span></a>
  </div>

</body>

Solution

  • As you are changing opacity from 1 to 0, change the z-index from 100 to 10. The opacity doesn't disable event handling (the top layer still has click detection), but z-index moves the visible elements to the top to artificially change the handling. A working example can be found here: CodePen