CSS - Flip card

 Crea tu flip card para tu sitio web

Código solo para copiar y pegar...

<!------ FLIP CARD ------>

  <h1>Descubre +más galerías de fotos... </h1>

 

  <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-->

            <a href="../p/zoo.html">Acceso</a>

          </div>

        </div>

    </div>

   

    <div class="flip-container">

        <div class="card card5">

          <div class="front front5">

            <h2>Animales Marinos</h2>

          </div>

          <div class="back back5">

            <!-- Aquí va el contenido-->

            <a href="../animales/marinos.html">Acceso</a>

          </div>

        </div>

    </div>

    <div class="flip-container">

        <div class="card card6">

          <div class="front front6">

            <h2>Animales Aéreos</h2>

          </div>

          <div class="back back6">

            <!-- Aquí va el contenido-->

            <a href="../animales/aereos.html">Acceso</a>

          </div>

        </div>

    </div>

  </div>

CSS

/*************** FLIP ***************/

.contenedor-fc{

  width: 100%;

  height: auto;

  max-height: auto;

  display: flex;

  flex-flow: row wrap;

  align-items: center;

  justify-content: center;

  padding-top: 25px;

  padding-bottom: 50px;

  background: white;

}

/* FONDO DE FLIP */

.flip-container {

  background-color: rgb(7, 0, 49);

  width: 250px;

  height: 350px;

  perspective: 1000px;

  margin: 20px 30px;

  -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_zool

ogical_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;

}

.front3{

  background: url(https://i.pinimg.com/736x/05/

7b/f7/057bf739f482e88cf2039e6b35deca6e.jpg) no-repeat center center /cover;

}

.front4{

  background: url(https://i.pinimg.com/736x/cc/d2/

f6/ccd2f6d9287a2ed64f998c791b31b537.jpg) no-repeat center center /cover;

}

.front5{

  background: url(https://wallpapers.com/images/hd/

turtle-background-xzvpa5t49wbjntpd.jpg) no-repeat center center /cover;

}

.front6{

  background: url(https://i.pinimg.com/236x/90/86/b3/

9086b3c19c2241874d2574a514cdcf39.jpg) no-repeat center center /cover;

}

  .tiposdepicos h3{

    text-align: center;

    font-size: 2rem;

    margin-bottom: 30px;

    padding: 0px 15px;

  }

.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;

}

.back3{

   background: url(https://img.magnific.com/foto-gratis/

libelula-brillante-sombras-neon_23-2151457806.jpg?semt=ais_hybrid&w=740&q=80)

no-repeat center center /cover;

}

.back4{

   background: url(https://images.stockcake.com/public/

f/4/4/f449aee3-6eb2-475b-963e-5227def635a9_large/dinosaur-by-lake-stockcake.jpg)

no-repeat center center /cover;

}

.back5{

   background: url(https://img.magnific.com/foto-gratis/

ilustracion-arte-digital-caballo-mar_23-2151546936.jpg?semt=ais_hybrid&w=740&q=80)

no-repeat center center /cover;

}

.back6{

   background: url(https://img.magnific.com/free-photo/

fantasy-bird-illustration_23-2151496108.jpg?semt=ais_hybrid&w=740&q=80)

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);

  }