I've created flipping cards that flip on hover, but I'm struggling to add a button/link that generates a new flipcard when clicked. Any help would be greatly appreciated - plus, I'm new here! Here's my HTML and CSS code for the flipcards:
$(document).ready(function() {
$("#new").click(function() {
$("card effect__hover").clone().insertAfter(thi);
});
});html {
background: url(index_bg.jpg) no-repeat;
background-size: cover;
}
.card {
position: relative;
float: left;
width: 200px;
height: 200px;
text-align: center;
margin-top: 100px;
}
.card:nth-child(1) {
margin-top: 100px;
margin-left: 100px;
margin-right: 8px;
}
.card:nth-child(2) {
margin-top: 100px;
margin-right: 8px;
}
.card.effect__ADD {
margin-left: 8px;
}
.card__front,
.card__back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card__front,
.card__back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.card__front {
background-color: blue;
}
.card__back {
background-color: orange;
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.card.effect__ADD:hover .card__front {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.card.effect__ADD:hover .card__back {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
span > p {
margin-top: 80px;
font-family: Arial;
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Read</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
<link href="read.css" rel="stylesheet">
</head>
<body>
<div class="card effect__hover">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"></span>
</div>
</div>
</div>
<div class="card effect__hover">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"></span>
</div>
</div>
<div class="card effect__hover">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"></span>
</div>
</div>
<a href="" class="new">
<div class="card effect__ADD">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"><p>Add Your Story</p></span>
</div>
</div>
</a>
</body>
</html>Any assistance in achieving this with jQuery would be much appreciated.