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.
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>
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;
}
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;
}
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.
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;
}
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);
}
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
.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.