28172 sujets

CSS et mise en forme, CSS3

Problème de transition

Bonjour,
Je souhaite au survole de mon calque "comment" que celui ci grandisse automatiquement pour que l'on puisse voir tous le texte. Le souci, c'est que ça fait 2h que j'essaye en vain !

Voici le code :
http://codepen.io/madvic/pen/hjDem

	<div class="container">
		<dl>
			<dt>Titre :</dt>
			<dd>
				<div class="comments">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</div>
			</dd>
		</dl>
	</div>


		.container{
				background-color:#FAAD41;
				width:20%;
          font-family:Arial;
		}

		div.comments{
				background-color:#F2F2A7;
				overflow: hidden;
				height:5em;
				-webkit-transition: height 1s ease-out;
				-moz-transition: height 1s ease-out;
				-ms-transition: height 1s ease-out;
				 -o-transition: height 1s ease-out;
						transition: height 1s ease-out;
		}
		div.comments:hover {
				overflow: visible;
				min-height:5em;
				height:auto;
		}


Merci de votre aide
Salut,

Si ta question concerne la transition de height entre 0 et auto sache que ce n'est pas possible uniquement en CSS. Deux solutions sont alors possibles :
- Utiliser du Javascript
- Contourner le problème

Voici 2 lien pour contourner le problème :
- http://www.css3create.com/Astuce-Utiliser-les-transitions-CSS-avec-height-auto par Vincent DeOliviera
- http://jsfiddle.net/leaverou/zwvNY/ par Lea Verrou

Il y en avait une autre proposé par Raphael Goetter mais je ne retombe plus dessus.

En espérant t'avoir éclairé
Evidemment, ca tombre sur moi !
En tout cas, merci, c'est très clair.
Utiliser scaleY, non merci, ca ne répond pas à mon besoin.
Et là je vois l'exemple avec max-height, très très bien !!!
Et bien je n'arrive pas à le reproduire de mon côté.
Je continue a tester et je vous redis ça !!!
Thanks
C'est bon pour moi !
http://codepen.io/madvic/pen/gHsDz


.container{
	background-color:#FAAD41;
	width:25%;
	font-family:Arial;
}

div.comments{
	background-color:LightGray;
	overflow: hidden;
	min-height:5em;
	max-height:5em;
	-webkit-transition: max-height 2s ease-in-out;
	-moz-transition: max-height 2s ease-in-out;
	-ms-transition: max-height 2s ease-in-out;
	-o-transition: max-height 2s ease-in-out;
	transition: max-height 2s ease-in-out;
}
div.comments:hover {
	max-height:999em;
}


Un grand merci
Sujet clos
Aller à