Flip Card con contenido al reverso
Código HTML
<div class="contenedor-fc">
<div class="flip-container">
<div class="card">
<div class="front">
<h2>Zoo</h2>
</div>
<div class="back">
<!-- Aquí va el contenido-->
</div>
</div>
</div>
<!-- Una 2da flip card -->
<div class="flip-container">
<div class="card card2">
<div class="front front2">
<h2>Herpetario</h2>
</div>
<div class="back back2">
<!-- Aquí va el contenido-->
</div>
</div>
</div>
</div>
Código CSS
/*************** FLIP ***************/
.contenedor-fc{
width: 100%;
height: auto;
max-height: auto;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
margin: 30px 0px;
}
/* FONDO DE FLIP */
.flip-container {
background-color: rgb(201, 201, 201);
width: 250px;
height: 350px;
perspective: 1000px;
margin: 10px;
-webkit-box-shadow: 10px 15px 18px 1px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 15px 18px 1px rgba(0,0,0,0.75);
box-shadow: 10px 15px 18px 1px rgba(0,0,0,0.75);
}
.card {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-container:hover .card {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items:first baseline;
justify-content: end;
font-size: 1.3rem;
}
.front {
background: url(https://img2.wallspic.com/
previews/9/7/1/0/7/170179/170179-lion-tiger
-zoo-dartmoor_zoo-berlin_zoological_garden-500x.jpg)
no-repeat center center /cover;
}
.front2{
background: url(https://images.pexels.com/
photos/20546357/pexels-photo-20546357/free-
photo-of-a-bearded-lizard-sitting-on-a-rock.
jpeg?cs=tinysrgb&dpr=1&w=500)
no-repeat center center /cover;
}
h2{
background: rgb(20, 18, 18);
color: aliceblue;
font-size: 1.2rem;
padding: 3px 25px;
}
.back {
background: url(https://wallpaper.forfun.com/
fetch/d4/d42699333f55f4068f92d16196eb0773.jpeg)
no-repeat center center /cover;
transform: rotateY(180deg);
display: flex;
flex-flow: column;
align-items: center;
justify-content: end;
}
.back2{
background: url(https://i.pinimg.com/736x/f5/a3
/ee/f5a3eece3cba943ba0bba0a47d9617a2.jpg)
no-repeat center center /cover;
}
.back a{
background: rgb(20, 18, 18);
color: rgb(239, 224, 224);
font-size: 14px;
text-decoration: none;
text-align: center;
line-height: 30px;
padding: 3px 20px;
margin: 1px 0px;
transition: .2s all linear;
}
.back a:hover{
color: rgb(255, 245, 52);
background: rgb(38, 32, 0);
}
