J'ai une version de démonstration ici de ce que je suis en train de faire. Je suis sûr que je suis absente, mais j'ai certainement me manque quelque chose. Les deux flipcards conduire à la même lien et je n'arrive pas à être séparés, quand je change l'un de l'autre change aussi. J'ai essayé de faire une classe à part, mais je pense que j'ai fait de mal. Aussi vous vous demandez comment corriger le décalage qui se produit pour la deuxième flipcard. Je vous remercie à l'avance.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 280px;
padding: 0px;
height: 220px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fliptext1
body {
font-family: Arial;
text-align: center;
}
.flip-card1 {
background-color: transparent;
width: 280px;
height: 220px;
perspective: 1000px;
}
.flip-card-inner1 {
position: relative;
width: 280px;
height: 220px;
text-align: center;
transition: transform 0.9s;
transform-style: preserve-3d;
box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
}
.flip-card1:hover .flip-card-inner1 {
transform: rotateY(180deg);
}
.flip-card-front1, .flip-card-back1 {
position: absolute;
width: 280px;
height: 220px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front1 {
background-color: #bbb;
color: black;
}
.flip-card-back1 {
background-color: #354C2F;
color: white;
width: 280px;
height: 220px;
transform: rotateY(180deg);
font-family: Arial;
text-align: center;
padding: 0px;
background-image: url('');
}
a.link1{
href="https://yorku.ca/research" target="https://yorku.ca/research"}
</style>
</head>
<body>
<div class="flip-card1">
<div class="flip-card-inner1">
<div class="flip-card-front1">
<img src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg" alt="Avatar" style="width:280px;height:220px;">
</div>
<div class="flip-card-back1">
<a class="link1" href="https://yorku.ca/research">
<img border="0" alt="YorkU C4" src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/purpose-driven.png" width="280" height="220">
</div>
</div>
</div>
</div>
<div class="column" style="background-color:#bbb;">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fliptext2
body {
font-family: Arial;
text-align: center;
}
.flip-card2 {
background-color: transparent;
width: 280px;
height: 220px;
perspective: 1000px;
}
.flip-card-inner2 {
position: relative;
background-color: #354C2F;
width: 280px;
height: 220px;
text-align: center;
transition: transform 0.9s;
transform-style: preserve-3d;
box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
}
.flip-card2:hover .flip-card-inner2 {
transform: rotateY(180deg);
}
.flip-card-front2, .flip-card-back2 {
position: absolute;
width: 280px;
height: 220px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front2 {
background-color: #bbb;
color: black;
}
.flip-card-back2 {
background-color: #354C2F;
color: white;
width: 280px;
height: 220px;
transform: rotateY(180deg);
font-family: Arial;
text-align: center;
padding: 0px;
background-image: url('');
}
a.link2{
href="https://yorku.ca/c4" target="https://yorku.ca/c4"}
</style>
</head>
<body>
<div class="flip-card2">
<div class="flip-card-inner2">
<div class="flip-card-front2">
<img src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg" alt="Avatar" style="width:280px;height:220px;">
</div>
<div class="flip-card-back2">
<a class="link2" href="https://yorku.ca/c4">
<img border="0" alt="YorkU C4" src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/the-looped-in-project.png" width="280" height="220">
</div>
</div>
</div>
</body>
</html>