28172 sujets

CSS et mise en forme, CSS3

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

Bonjour tout le monde Smiley smile
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 Smiley 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, Smiley langue
Par avance, merci pour votre aide.
Sylvain
Modifié par bboygaz (26 Jul 2014 - 01:55)
salut,
déjà côté sémantique, je ne suis pas très sûr de la pertinence de tes choix. On n'a pas tout ton HTML mais combien de titres il y a avant tes <h5> ? Et puis enchaîner comme ça h5, h6, h6...
Je suppose que tu devrais peut être regrouper ton cursus dans une liste <ul> et utiliser des <h2> en ayant bien sûr penser à mettre un <h1> pour ton document.
Une autre petite remarque, c'est que tu n'as pas besoin de passer par des keyframes pour ce genre de choses simples. La propriété "transition" fera amplement l'affaire.
Je me suis amusé à essayer quelque chose, je ne sais pas si ça se rapproche de ce tu veux mais tu peux quand même jeter un coup d’œil si cela te sied Smiley langue .
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 Smiley langue
Puis-je abuser de ta gentillesse ?
J'aimerai savoir ce qui fait la différence entre transition et animation ?
Cela semble faire la même chose, mais les transitions semble plus simple à coder (bye les keyframes).

Du fait, j'ai du mal à saisir le bien-fondé des animations...
Sujet clos
Aller à