Faire apparaître du texte au survol d'une div. Résolu/Fermé

Question

Bonjour tout le monde :) J'aimerais mettre un CV en ligne sous la forme d'un site internet. Voici à quoi cela devrait ressembler : http://sylvain-galoustoff.com/images/screencv.jpg Au survol d'une case (ex : Bac S), la case s'étire sur toute la longueur comme ceci : http://sylvain-galoustoff.com/images/hover.jpg Ce que j'aimerais en plus, c'est qu'un texte plus complet s'affiche dans la case. Ce que je n'arrive pas à faire. Voici mes codes : HTML

Bac S

Spécialité physique/chimie, Lycée Lavoisier, Le Creusot.

J'obtiens mon diplôme sans gloire : au rattrapage... Après avoir redoublé ma première et ma terminale.

CSS .bac { position: relative; width: 50px; height: 99.99%; background-image:linear-gradient(#9dbee9, #0b0f37); border-bottom: 1px solid #fff; border-right: 1px solid #fff; } .bac:hover { animation: bac_content 0.25s linear both; z-index: 1; } @keyframes bac_content { from { width: 50px;} to { width: 99.99%;} } C'est donc le texte entre balises

que je voudrais faire apparaître uniquement si la souris est au dessus de la div class="bac". J'ai bien trouvé une solution en jouant sur la transparence du texte sur h6:hover, mais cela ne me satisfait pas : le texte n'occupant pas la totalité de la case, si le pointeur n'est pas au-dessus du texte (mais quand même dans la case), évidement, ça marche pas [cligne]. J'aimerais une solution HTML+CSS, pas de javascript. Si cela est possible, bien sur. Je tiens à préciser que je suis débutant, soyez indulgents, [langue] Par avance, merci pour votre aide. Sylvain

inspiring · Answer

Bonjour,

 petite retouche du css mais a voir si c'est le résultat attendu :

.bac {
 position: relative;
 width: 50px;
 height: 99.99%;
 background-image:linear-gradient(#9dbee9, #0b0f37);
 border-bottom: 1px solid #fff;
 border-right: 1px solid #fff;
}
.bac h6 {text-indent:-9999px;}

.bac:hover {
 animation: bac_content 0.25s linear both;
 z-index: 1;
}

.bac:hover h6 {text-indent:inherit; }

@keyframes bac_content {
  from {
  width: 50px;}
  to {
  width: 99.99%;}
 }
 
Petite remarque. Si c'est pour un CV, évite les animations demandant une action direct utilisateur, ça agace un peu (trop d'anim tue l'anim). Pour une lecture des informations, cela oblige à relancer chaque element un par un ; et la premiere façon de lire un CV pour un recruteur est une lecture en "diagonale".

Il y a beaucoup d'effet de style plus interessant, mais sans passer par le JS c'est compliqué.

bboygaz · Answer

Merci Inspiring, c'est tout à fait ce que je cherchais et je pourrais m'en satisfaire, mais je cherche aussi, et surtout, à comprendre ce que je fais. Donc, pour moi, ce que ton code fait : .bac h6 {text-indent:-9999px;} Ceci décale l'affichage du texte en dehors de l'écran et .bac:hover h6 {text-indent:inherit; } Au survol de , le h6 contenu dans prend l'indentation (inherit) de . J'ai bon ?

Faire apparaître du texte au survol d'une div.

2 réponses

Discussions similaires