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

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 .
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,
Par avance, merci pour votre aide.
Sylvain
Modifié par bboygaz (26 Jul 2014 - 01:55)

Salut Zelalsan, merci pour ta réponse.
Effectivement ton code est plus simple que le miens, et fait exactement ce que je voulais.
Merci pour la leçon et à bientôt pour une autre question de noob