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

Résolu
bboygaz Messages postés 38 Date d'inscription   Statut Membre Dernière intervention   -  
bboygaz Messages postés 38 Date d'inscription   Statut Membre Dernière intervention   -
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 
<div class="formation">
   <div class="bac">
      <h5>Bac S</h5>
      <h6>Spécialité physique/chimie, Lycée Lavoisier, Le Creusot.</h6>
      <h6>J'obtiens mon diplôme sans gloire : au rattrapage... Après avoir redoublé ma première et ma terminale.</h6>
   </div>
</div>


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 <h6> 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
A voir également:

2 réponses

Réponse 1 / 2
bboygaz Messages postés 38 Date d'inscription   Statut Membre Dernière intervention   1
 
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 <bac>, le h6 contenu dans <bac> prend l'indentation (inherit) de <bac>.

J'ai bon ?
0
inspiring Messages postés 1813 Date d'inscription   Statut Membre Dernière intervention   265
 
c'est tout a fait ça :)
0
bboygaz Messages postés 38 Date d'inscription   Statut Membre Dernière intervention   1
 
merci bcp :)
0
Réponse 2 / 2
inspiring Messages postés 1813 Date d'inscription   Statut Membre Dernière intervention   265
 
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é.
-1

Discussions similaires

Qui sont les personnes dans mon ajout rapide de Snapchat ?
lobino68 -
m_manolo25 -

21 réponses