Pour présenter votre équipe ou tout simplement vous-même, cette animation vous permettra d'afficher les liens vers vos réseaux-sociaux au survol de la carte : effet saisissant assuré ! Découvrons comment réaliser ceci ensemble.
1ère étape
Nous allons avoir besoin d'inclure Font Awesome 5. Cette librairie nous permettra d'ajouter des icônes de réseaux-sociaux.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css”>
2ème étape
Le code HTML.
<div class="card">
<div class="informations">
<img src="https://cdn.vox-cdn.com/thumbor/nDW7YqKV8soKsZSfRorGXJLSH50=/1400x1400/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/22147179/1229892934.jpg" alt="Elon Musk">
<h1>Elon Musk</h1>
<h2>Serial Entrepreneur</h2>
</div>
<div class="icon">
<a href="#"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#"><i class="fab fa-github fa-2x"></i></a>
<a href="#"><i class="fab fa-twitter fa-2x"></i></a>
</div>
</div>Grâce à la librairie Font Awesome que nous avons ajouté à la première étape, chaque classe commençant par “fa” sera récupérée et transformée par une icône.
La classe fa-2x permet de doubler la taille de l’icône.
Vous pouvez retrouver toutes les icônes disponibles sur fontawesome.com/icons.
3ème étape
Stylisons maintenant la carte (.card).
.card {
background: white;
width: 350px;
height: 400px;
cursor: pointer;
position: relative;
overflow: hidden;
}
4ème étape
Passons aux informations et à la photo de profil.
.informations {
text-align: center;
margin-top: 100px;
}
.card img {
width: 40%;
border-radius: 50%;
transition: all .3s;
}
5ème étape
Stylisons les titres.
.card h1, .card h2 {
transition: all .3s;
}
.card h1 {
margin-top: 30px;
}
.card h2 {
font-size: 1.3em;
}
.card:hover img, .card:hover h1, .card:hover h2 {
transform: translateY(-50px);
}
6ème étape
Terminons avec les icônes.
.icon {
position: absolute;
bottom: 50px;
left: 50%;
transform: translate(-50%);
}
.icon a i {
margin: 10px;
color: #c32aa3;
transition: all .6s;
transform: translateY(100px);
}
.card:hover .icon a i {
transform: translateY(15px);
}
