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 !
1ère étape
Commençons avec le code 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.
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.
.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.
.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 !
.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.
.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.
.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 !