How to expand a div and its contents on hover?

html css expand
Nicole picture Nicole · Dec 12, 2014 · Viewed 52.3k times · Source

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.

Here is the JSFiddle

Answer

Weafs.py picture Weafs.py · Dec 12, 2014

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>

Related questions

Parent div not expanding to children's height

As you will see, I have a div (#innerPageWrapper) that wraps around the divs that contain the content. #innerPageWrapper also does act visually as a semi-transparent border in the layout. My problem is that #innerPageWrapper won't expand to fit the …

Read More
Click header and expand text without using JavaScript / jQuery

As pointed out in the title, my question is very simple: is there any way that I can achieve clicking on a header (title) and expand (and collapse) a text associated with it, without using JavaScript nor jQuery? Is there …

Read More
How to grow a div horizontally by its content?

please, can someone explain to me, why the red div isn't expanding to the right? It stops where the screen ends. What do I have to do, to make it expand? One thing that works is to "display: table-cell" the …

Read More