Nous avons déjà vu comment créer un élément qui s'affiche au survol de la souris sur une image, mais voici dans cet article comment afficher tout un tas d'informations et ce de manière très fluide en passant la souris sur un élément !
L'ensemble de ce tutoriel est également disponible sur notre compte Instagram.
1ère étape
Le code HTML.
<div class='card'>
<div class='info'>
<h1 class='title'>Tokyo</h1>
<p class='description'>Capitale animée du Japon, Tokyo associe les styles ultramodernes et traditionnels, dans un mélange de gratte-ciel aux néons lumineux et de temples anciens. Le somptueux Meiji-jingū est un sanctuaire shinto réputé pour son entrée imposante et les bois qui l'environnent. Le palais impérial est entouré de vastes jardins publics. Les nombreux musées de la ville proposent des expositions allant de l'art classique, au musée national de Tokyo, à un théâtre kabuki reconstruit, au musée d'Edo-Tokyo.</p>
</div>
</div>
2ème étape
Stylisons maintenant la carte.
.card {
border-radius: 16px;
margin: 0 auto;
width: 500px;
max-width: 100%;
min-height: 500px;
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
overflow: hidden;
background-image: url(https://cdn.pixabay.com/photo/2019/04/20/11/39/japan-4141578_960_720.jpg);
background-size: cover;
}
3ème étape
Attaquons-nous au div contenant les informations.
.info {
position: relative;
width: 100%;
height: 500px;
background-color: #fff;
transform: translateY(100%)
translateY(-88px)
translateZ(0);
transition: transform 0.3s ease-out;
}
4ème étape
Ajoutons un background au div contenant les informations.
.info:before {
z-index: -1;
display: block; position: absolute;
content: ' ';
width: 100%; height: 100%;
overflow: hidden;
background-image: url(https://cdn.pixabay.com/photo/2019/04/20/11/39/japan-4141578_960_720.jpg);
filter: blur(10px);
background-size: cover;
opacity: 0.25;
transform: translateY(-100%)
translateY(88px)
translateZ(0);
transition: transform 0.3s ease-out;
}Ici nous stylisons le background du div avec les informations en utilisant :before.
Ceci va nous permettre d'ajouter un fond qui occupe toute la hauteur et toute la largeur de la div, tout en nous donnant la possibilité de le flouter avec le filtre blur.
5ème étape
Stylisons le titre et la description.
.title {
margin: 0;
padding: 24px;
font-size: 40px;
line-height: 1;
color: rgba(0, 0, 0, 0.87);
}
.description {
margin: 0;
padding: 0 24px 24px;
font-size: 18px;
line-height: 1.5;
}
6ème étape
Il nous suffit de détecter le survol de la carte pour terminer ce code !
.card:hover .info,
.card:hover .info:before {
transform: translateY(0) translateZ(0);
}
Conclusion
Voilà comment vous pouvez créer un texte apparaissant au survol ! Si vous voulez faire encore plus simple et que vous vous demandez : comment faire apparaître un texte au survol d'une image ? Il suffit de rajouter l'attribut title="texte qui sera affiché" sur votre balise img.
