How to expand a div and its contents on hover?

Question

I'm trying to create a div that expands on hover, but cannot figure out how to make the content expand with the div. I've tried a few overflow options, but they didn't work.

.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>

Here is the JSFiddle

Weafs.py · Accepted Answer · 2018-09-17T12:41:44.220

30

Add overflow: hidden to the parent(.grow) container to hide the description. This will reveal the description on hover.

Additionally, instead of using the <br /> tag, wrap the text in a <p> tag.

.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>

edited Sep 17 '18 at 12:41

answered Dec 12 '14 at 10:19

Weafs.py

22,731
9
56
78

Is there any way to keep the animation? – Fahim Ferdous Mar 02 '18 at 16:49
1

@FahimFerdous - What do you mean by "keep the animation"? – Weafs.py Mar 04 '18 at 23:38
I mean, I want to keep the length as a variable (would set by itself) while the animation is not gone. – Fahim Ferdous Mar 15 '18 at 06:55
adding "auto" makes the animation disappeared but i want both "auto" and animation to work at the same time – Fahim Ferdous Mar 15 '18 at 06:55
@FahimFerdous https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css – Lynn Sep 17 '18 at 12:04

score 3 · Answer 2 · edited Dec 12 '14 at 10:19

3

just update;

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

edited Dec 12 '14 at 10:19

Alex Char

32,879
9
49
70

answered Dec 12 '14 at 10:19

Aru

1,840
1
12
15

3

this will break the animation between the 2 states http://jsfiddle.net/h3w1wtmv/3/ – web-tiki Dec 12 '14 at 10:20
Is there any way to preserve the animation? – Fahim Ferdous Mar 02 '18 at 16:52

score 1 · Answer 3 · answered Jul 29 '15 at 08:03

1

Check with the below link if it works with you.

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;
}

answered Jul 29 '15 at 08:03

Steevan

826
5
8

The .grow class needs the following two lines to create a smooth transition for width as well: `transition: width 0.5s; -webkit-transition: width 0.5s;` I also changed .grow:hover's height to "auto" so it displays all the content it contains. Changing the height attribute made the height's transition less smooth, so I speed it up to 0.2s to compensate in this [demo](https://jsfiddle.net/gknLstpt/31/). This "fix" doesn't work well at all; is there anyway to maintain smooth transitions while handling the object's height dynamically? – plaidcorp Oct 11 '15 at 08:13

berge · Answer 4 · 2018-12-22T05:36:12.833

With CSS only, first key is "overflow:hidden", but if you fix height, all your elements expands same way, no mater containing text. If you do "height:auto", they expands right heights, but no animation supported. There is a way you do both with some little javascript, to use element.scrollHeight, that gives you correct height on all needed elements.

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>

How to expand a div and its contents on hover?

4 Answers4

Linked