Créer des cartes de présentation animées

Que ce soit pour présenter l'équipe derrière votre projet ou pour toute autre chose, utiliser des cartes de présentation animées donnera une touche finale réussie à votre page. Découvrons comment le faire dans cet article !

LLLouis-Nicolas Leuillet

Mis à jour le 3 décembre 2024

Créer des cartes de présentation animées

1ère étape

Commençons avec le code HTML.

HTML

<div class="card card0">
  <div class="border">
    <h2>Al Pacino</h2>
    <div class="icons">
      <a href="#"><i class="fab fa-codepen"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-dribbble"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-facebook"></i></a>
    </div>
  </div>
</div>

<div class="card card1">
  <div class="border">
    <h2>Ben Stiller</h2>
    <div class="icons">
      <a href="#"><i class="fab fa-codepen"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-dribbble"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-facebook"></i></a>
    </div>
  </div>
</div>

<div class="card card2">
  <div class="border">
    <h2>Patrick Stewart</h2>
    <div class="icons">
      <a href="#"><i class="fab fa-codepen"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-dribbble"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-facebook"></i></a>
    </div>
  </div>
</div>

2ème étape

Pour cet exemple nous utiliserons flexbox sur notre balise body.

CSS

body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  height: 100vh;
}

3ème étape

Maintenant, nous allons nous occuper des cartes.

CSS

.card {
  height: 379px;
  width: 300px;
  border-radius: 10px;
  transition: all 0.8s;
  overflow: hidden;
  background: black;
  box-shadow: 0 70px 63px -60px #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

4ème étape

Nous avons donc nos cartes : intégrons le cadre blanc et son apparition au survol.

CSS

.border {
  height: 369px;
  width: 290px;
  border-radius: 10px;
  transition: all 1s;
  position: relative;
}

.border:hover {
    border: 1px solid white;
}

5ème étape

Nous avons maintenant nos cartes et nos bordures, mais nous n'avons que des fonds noirs... Ce n'est pas très beau. Changeons ça en ajoutant des photos sur chaque carte !

CSS

.card0 {
  background: url('https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg') center center no-repeat;
  background-size: 300px;
}
    
.card0:hover {
    background: url('https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg') left center no-repeat;
    background-size: 600px;
}

.card1 {
  background: url('https://i.pinimg.com/originals/28/d2/e6/28d2e684e7859a0dd17fbd0cea00f8a9.jpg') center center no-repeat;
  background-size: 300px;
}

.card1:hover {
    background: url('https://i.pinimg.com/originals/28/d2/e6/28d2e684e7859a0dd17fbd0cea00f8a9.jpg') left center no-repeat;
    background-size: 600px;
}

.card2 {
  background: url('https://i.pinimg.com/originals/ee/85/08/ee850842e68cfcf6e3943c048f45c6d1.jpg') center center no-repeat;
  background-size: 300px;
}

.card2:hover {
    background: url('https://i.pinimg.com/originals/ee/85/08/ee850842e68cfcf6e3943c048f45c6d1.jpg') left center no-repeat;
    background-size: 600px;
}

6ème étape

Stylisons désormais nos titres et nos icônes.

CSS

.card h2 {
  font-family: Arial, sans-serif;
  color: white;
  margin: 20px;
  opacity: 0;
  transition: all 1s;
}

.fab {
  opacity: 0;
  transition: all 1s;
}

.icons {
  position: absolute;
  height: 130px;
  top: 226px;
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

a {
  color: white;
}

7ème étape

Faisons maintenant apparaître les icônes et le titre des cartes au survol.

CSS

.card:hover h2 {
    opacity: 1;
}

.card:hover .fab {
    opacity: 1;
}

Bravo ! Nous avons fini !

Partagez votre résultat sur le salon de discussion officiel de Believemy !

Catégorie : Développement