html - Pure css card flip with a checkbox and label, can't click <a> tag link on card face

Question

For my study i'm creating a webapp in which I am NOT allowed to use any javascript.

I managed to create a card flip on click by using a checkbox and label that is the size of the card itself.

On the backside of the card I have an tag link that directs the user to a different page. However, because of the label that's spread across the card I am unable to actually click the link.

Any idea how to fix this issue?

Heres a codepen: https://codepen.io/sasjakoning/pen/YzGOrWX

The HTML:

Fact or Fiction?

Same sex marriage is legal in the Netherlands.

Same sex marriage is legal in the Netherlands.

Fact

In the Netherlands you're free to be who you are. Actually, the Netherlands was the first(!) country to legalise same sex marriage!

Learn more about lgbtq+

CSS:

*, html {
padding: 0px;
margin: 0px;
box-sizing: border-box;
scroll-behavior: smooth;
scroll-padding-top: 60px; /*zodat de topbar niet in de weg zit bij anchor links*/
scrollbar-width: none; /*om de scrollbar in firefox hidden te krijgen*/
}

#factorfiction article {
margin: 0 10% 25px 10%;
}

.polaroid-card{
position: relative;
width: 30%;
height: 35vw;
margin: 1em 0 3em 0 !important;
text-align: center;
}

.card-view, .card, .face {
width: 100%;
height: 35vw;
}

.card {
position: relative;
transform-style: preserve-3d;
transition: 0.5s;
text-align: center;
display: block;
margin: 0 0 2em 0;
}

.face {
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
transform: rotateX(0deg);
}

.face figcaption {
z-index:0;
}

.face img {
width: 75%;
margin-top: 4em;
padding: 0;
}

.face figcaption p:first-of-type {
position: absolute;
top: 0;
width: 100%;
font-size: 2vw;
font-weight: bold;
padding: 0.6em 2rem 0 2rem;
}

.card .face:nth-of-type(2) figcaption p:first-of-type {
font-size: 1vw;
padding: 0.7em 2em 0 2em;
font-weight: bold;
}

.polaroid-card:first-of-type .face figcaption p:nth-of-type(2) {
font-size: 2vw;
padding: 0.5em 1.3em 0 1.3em;
font-weight: bold;
}

.face figcaption p:nth-of-type(2) {
font-size: 7vw;
padding: 0.7em 1.3em 0 1.3em;
font-weight: bold;
}

.face:nth-of-type(1) p:nth-of-type(3) {
padding: 0.5em 0 0 0;
font-size: 5.5vw;
font-weight: bold;
color: #59b3ab;
}

.face:nth-of-type(2) figcaption p:nth-of-type(2) {
position: absolute;
top: 28%;
width: 100%;
transform: rotate(-25deg);
font-size: 5.5em !important;
padding: 0 !important;
-webkit-text-stroke: 3px rgb(240, 240, 240);
}

.face:nth-of-type(2) figcaption p:nth-of-type(3) {
font-size: 0.5em;
padding: 0.2em 2.3rem 0 2.3rem;
text-align: left;
font-family: 'colendra', sans-serif;
letter-spacing: 0.1em;
font-weight: bold;
line-height: 1.2em;
}

.face figcaption a {
font-family: 'colendra', sans-serif;
left: 2.3rem;
bottom: 0.7rem;
position: absolute;
font-weight: bold;
letter-spacing: 0.1em;
text-align: left;
display: block;
z-index:1000;
}

.face:first-of-type {
z-index: 2;
background: white;
border: 1px solid lightgray;
box-shadow: 5px 3px 8px #33333352;
}

.face:nth-of-type(2) {
transform: rotateY(180deg);
background: rgb(240, 240, 240);
border: 1px solid lightgray;
box-shadow: 5px 3px 8px #33333352;
}

.face:nth-of-type(2):hover .card {
transform: rotateY(+180deg);
}

#toggle1:checked ~ .card, 
#toggle2:checked ~ .card,
#toggle3:checked ~ .card,
#toggle4:checked ~ .card,
#toggle5:checked ~ .card,
#toggle6:checked ~ .card,
#toggle7:checked ~ .card  {
transform: rotateY(-180deg);
}

#toggle1, 
#toggle2,
#toggle3,
#toggle4,
#toggle5,
#toggle6,
#toggle7 {
display: none;
}

#toggle-label1, 
#toggle-label2,
#toggle-label3,
#toggle-label4,
#toggle-label5,
#toggle-label6,
#toggle-label7 {
position: absolute;
width: 100%;
height: 125vw;
background: transparent;
cursor: pointer;
text-align: center;
transition: all .5s;
z-index: 1;
display: block;
border: none;
padding: 0;
}

/* bron (zwaar aangepast) van bovenstaande code: https://codepen.io/joetower/pen/bdulk */

.fact {
color: #59b3ab;
font-weight: bold;

display: inline;
height: auto;
margin-bottom: 0;

background: transparent;
border-radius: 0;

z-index: 0;
}

.fiction {
color: #da5241;
font-weight: bold;
display: inline;
height: auto;
margin-bottom: 0;

background: transparent;
border-radius: 0;

z-index: 0;
}

I have tried:

• Using z-index but that's not doing anything for some reason.

• making the label a bit shorter so the bottom of the card isn't included anymore. this way the link can be clicked. This is an optional solution but it decreases the user experience since chances of misclicking are higher.

• making it so only the front side of the card is clickable with the label, and the backside isn't. This is also a possible solution but i'd much rather keep the option to flip the card back again.

Thanks in advance!

Answer 1

The problem is that your link is inside another element (face) with position: absolute. You need to have the link on the same dom-level as the label to be able to make them both clickable. I did the following things:

1. removed your link from the face and put it right ino the polaroid-card Element, same Level as your Input/Label. So they position relative to the polaroid-card(next position:relative Element higher in the dom)
2. i removed the specific Styling for your link element and replaced it with general styling for a-Elements
3. i added another styling for the a element depending on the checkbox being checked, so the link is only visible if you flip the card.

View the full-page Option to see the changes correctly (in the small window the font for the link is way to big)

I left comments in the code where i made changes

*, html {
    padding: 0px;
    margin: 0px;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-padding-top: 60px; /*zodat de topbar niet in de weg zit bij anchor links*/
  scrollbar-width: none; /*om de scrollbar in firefox hidden te krijgen*/
}

#factorfiction article {
  margin: 0 10% 25px 10%;
}

.polaroid-card{
  position: relative;
  width: 30%;
  height: 35vw;
  margin: 1em 0 3em 0 !important;
  text-align: center;
}

.card-view, .card, .face {
  width: 100%;
  height: 35vw;
}
 
.card {
  position: relative;
  transform-style: preserve-3d;
  transition: 0.5s;
  text-align: center;
  display: block;
  margin: 0 0 2em 0;
}

.face {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  transform: rotateX(0deg);
}

.face figcaption {
  z-index:0;
}

.face img {
  width: 75%;
  margin-top: 4em;
  padding: 0;
}

.face figcaption p:first-of-type {
  position: absolute;
  top: 0;
  width: 100%;
  font-size: 2vw;
  font-weight: bold;
  padding: 0.6em 2rem 0 2rem;
}

.card .face:nth-of-type(2) figcaption p:first-of-type {
  font-size: 1vw;
  padding: 0.7em 2em 0 2em;
  font-weight: bold;
}

.polaroid-card:first-of-type .face figcaption p:nth-of-type(2) {
  font-size: 2vw;
  padding: 0.5em 1.3em 0 1.3em;
  font-weight: bold;
}

.face figcaption p:nth-of-type(2) {
  font-size: 7vw;
  padding: 0.7em 1.3em 0 1.3em;
  font-weight: bold;
}

.face:nth-of-type(1) p:nth-of-type(3) {
  padding: 0.5em 0 0 0;
  font-size: 5.5vw;
  font-weight: bold;
  color: #59b3ab;
}

.face:nth-of-type(2) figcaption p:nth-of-type(2) {
  position: absolute;
  top: 28%;
  width: 100%;
  transform: rotate(-25deg);
  font-size: 5.5em !important;
  padding: 0 !important;
  -webkit-text-stroke: 3px rgb(240, 240, 240);
}

.face:nth-of-type(2) figcaption p:nth-of-type(3) {
  font-size: 0.5em;
  padding: 0.2em 2.3rem 0 2.3rem;
  text-align: left;
  font-family: 'colendra', sans-serif;
  letter-spacing: 0.1em;
  font-weight: bold;
  line-height: 1.2em;
}
/*changed code*/
a {
  font-family: 'colendra', sans-serif;
  left: 2.3rem;
  bottom: 0.7rem;
  /*this only works if the parent is relative and both the link and label/input are absolute*/
  position: absolute;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: left;
  /*display none so it isnt visible from the start*/
  display: none;
  /*z-index just needs to be higher than the one of the label/input*/
  z-index:5;
}

.face:first-of-type {
  z-index: 2;
  background: white;
  border: 1px solid lightgray;
  box-shadow: 5px 3px 8px #33333352;
}

.face:nth-of-type(2) {
  transform: rotateY(180deg);
  background: rgb(240, 240, 240);
  border: 1px solid lightgray;
  box-shadow: 5px 3px 8px #33333352;
}

.face:nth-of-type(2):hover .card {
  transform: rotateY(+180deg);
}

#toggle1:checked ~ .card, 
#toggle2:checked ~ .card,
#toggle3:checked ~ .card,
#toggle4:checked ~ .card,
#toggle5:checked ~ .card,
#toggle6:checked ~ .card,
#toggle7:checked ~ .card  {
  transform: rotateY(-180deg);
}
/*new code, we need to make the link visible when the card gets flipped*/
#toggle1:checked ~ a, 
#toggle2:checked ~ a,
#toggle3:checked ~ a,
#toggle4:checked ~ a,
#toggle5:checked ~ a,
#toggle6:checked ~ a,
#toggle7:checked ~ a  {
  display: block;
}

#toggle1, 
#toggle2,
#toggle3,
#toggle4,
#toggle5,
#toggle6,
#toggle7 {
  display: none;
}

#toggle-label1, 
#toggle-label2,
#toggle-label3,
#toggle-label4,
#toggle-label5,
#toggle-label6,
#toggle-label7 {
  position: absolute;
  width: 100%;
  height: 125vw;
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: all .5s;
  z-index: 1;
  display: block;
  border: none;
  padding: 0;
}

/* bron (zwaar aangepast) van bovenstaande code: https://codepen.io/joetower/pen/bdulk */

.fact {
  color: #59b3ab;
  font-weight: bold;
  
  display: inline;
  height: auto;
  margin-bottom: 0;
  
  background: transparent;
  border-radius: 0;
  
  z-index: 0;
}

.fiction {
  color: #da5241;
  font-weight: bold;

  display: inline;
  height: auto;
  margin-bottom: 0;
  
  background: transparent;
  border-radius: 0;
  
  z-index: 0;
}

<body id="factorfiction">
  <article>
    
    <article class="polaroid-card" id="samesex">
                <input id="toggle2" type="checkbox">
                <label id="toggle-label2" for="toggle2"></label>
            
                <div class="card">
                    <figure class="face">
                        <img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3">
                        <figcaption>
                            <p><span class="fact">Fact</span> or <span class="fiction">Fiction</span>?</p>
                            <p>Same sex marriage is legal in the Netherlands.</p>
                        </figcaption>
                    </figure>
                    <figure class="face">
                        <img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3">
                        <figcaption>
                            <p>Same sex marriage is legal in the Netherlands.</p>
                            <p><span class="fact">Fact</span></p>
                            <p>
                                In the Netherlands you're free to be who you are. Actually, the Netherlands was the first(!)
                                country
                                to legalise same sex marriage!
                            </p>
                        </figcaption>
                    </figure>
                </div>
        <!--removed your link from the figcaption into the same dom-level as the label and input-->
                  <a href="lgbtq.html" alt="Link to lgbtq page">Learn more about lgbtq+</a>
            </article>
    
  </article>
</body>