Flip-Card: Hrefs not working on inner card

user_13632138 0
Viewed 194

I'm using a flip-card building block from the Foundation CSS framework for projects in a portfolio, and I have two links on the back/inner side of each card - the hrefs are not working:

<a href="https://github.com/JenJayme/lisas-pampered-paws" class="button float-left">Repo</a>

The code above works fine when I copy and paste it as-is somewhere else in my html. It's pretty simple. The links just don't work on the inner side of the flip card :( I tried adding an event listener for the link, with a simple alert on click, both inside and outside the ($document).ready function in the script, and the click never registers.

Anyone have suggestions to fix these links? Thanks in advance for any help!

You can see the full code on lines 287-288 in my index.html here and view the project (with non-working links) deployed prematurely here

zurb-foundation css-animations href events html
1 Answers

After no answers to this question on Stack Overflow or the Foundation Forum, I continued to poke around and found the solution in another question here. The problem is a glitch related to the card rotation and the webkit-transform line in the css. Here's the fix that worked for me:

Translate both front and back just a little bit and they won't overlap.

Example:

.element .front {
    -webkit-transform: translateZ(1px);
}

.element .back {
    -webkit-transform: rotateY(180deg) translateZ(1px);
}

Per a related comment, "the key is to only apply the translateZ to the card that you've just flipped to the back and only when it's flipped. That way you won't be affected by the fuzzy rendering that the translateZ would otherwise cause."

user_136321380
Related