web-dev-qa-db-fra.com

Comment développer une div et son contenu en vol stationnaire?

J'essaie de créer une div qui se développe en survol, mais je ne peux pas comprendre comment développer le contenu avec la div. J'ai essayé quelques options de débordement, mais elles ne fonctionnaient pas. 

.grow {
  padding: 5px 5px 5px 5px;
  border-radius:10px;
    height: 50px; 
    width: 22%; 
    margin: 5px 1% 5px 1%; 
    float: left; 
    position: relative; 
    transition:height 0.5s; 
    -webkit-transition:height 0.5s; 
    text-align: center;

}
.grow:hover {
    height: 115px; /* This is the height on hover */
}
<div class="grow" style="background-color: #2a75a9;">
    <h2>Title</h2> <br>
    Contrary to popular belief, Lorem Ipsum is not simply random text.  It has roots in a piece of classical Latin literature
</div>

Voici le JSFiddle

htmlcsscss3expand
8
Nicole

Ajoutez overflow: hidden au conteneur parent (.grow) pour masquer la description. Cela révélera la description en vol stationnaire.

En outre, au lieu d'utiliser la balise <br />, placez le texte dans une balise <p>.

.grow {
  padding: 5px 5px 5px 5px;
  border-radius: 10px;
  height: 49px;
  width: 22%;
  margin: 5px 1% 5px 1%;
  float: left;
  position: relative;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  text-align: center;
  overflow: hidden;
}
.grow:hover {
  height: 145px;
}
<div class="grow" style="background-color: #2a75a9;">
  <h2>Title</h2> 
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</p>
</div>

20
Weafs.py

juste mettre à jour;

.grow:hover {
    height: auto; /* This is the height on hover */
}
2
Aru

Vérifiez avec le lien ci-dessous si cela fonctionne avec vous.

https://jsfiddle.net/gknLstpt/9/

 .grow {
  padding: 5px 5px 5px 5px;
  border-radius: 10px;
  height: 49px;
  width: 15%;
  margin: 5px 1% 5px 1%;
  float: left;
  position: relative;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  text-align: center;
  overflow: hidden;
}
.grow:hover {
  height: 145px;
    width: 145px;
}
1
Steevan

Avec CSS uniquement, la première clé est "overflow: hidden", mais si vous corrigez la hauteur, tous vos éléments s'agrandissent de la même manière, aucun contenu ne contenant de texte. Si vous faites "height: auto", ils s'agrandissent bien, mais aucune animation n'est supportée. Il existe un moyen de faire les deux avec un peu de javascript, d'utiliser element.scrollHeight, qui vous donne une hauteur correcte sur tous les éléments nécessaires.

if (document.getElementsByClassName("auto")) {
  var autos = document.getElementsByClassName("auto");
  for (var i=0; i<autos.length; i++) {
    autos[i].addEventListener("mouseover", autoOver);
    autos[i].addEventListener("mouseout", autoOut);
  }
}

function autoOver() {
  this.style.height = this.scrollHeight + "px";
}

function autoOut() {
  this.style.height = "20px";
}
.auto {
  display: block;
  margin: 20px;
  width: 400px;
  height: 20px;
  overflow: hidden;
  transition: all .5s ease;
}
<div class="auto">
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.
</div>

<div class="auto">
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>

<div class="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

0
berge