Overflow Hidden Question

[CarraraWebsiteSolutions]

Hello I would like to know I have section on my website which have has 8 divs in that

each row has 6 div per row.

I would like to know how to get the first row to only show but when mouse rolls over the rest display.

Here is my css.

.box .featured-categories-box-heading {
color: #636E75;
font-size: 32px;
font-weight: normal;
margin-top: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
}
.box .featured-categories-box-content {
text-align:center;
border-top:1px solid #DBDEE1;
border-bottom:1px solid #DBDEE1;
}
.box .featured-categories-box-category {
display:inline;
}
.box .featured-categories-box-category > div {
display:inline-block;
margin:10px 5px 10px 5px;
border:1px solid #DBDEE1;
padding:5px;
}
.box .featured-categories-box-category > div:hover {
box-shadow: 0px 0px 5px #DCDCDC;
}
.box .featured-categories-box-category > div .name {
text-align:center;
}
.box .featured-categories-box-category > div .name a{
text-decoration:none;
color: #7C7E80;
text-transform:uppercase;
text-shadow: text-shadow: 2px 2px 5px #454545;
}
.box .featured-categories-box-category > div .name a:hover{
color:#000;
}

[Historical Forums User]

Make an example in [Codepen](http://codepen.io/pen/ “http://codepen.io/pen/”).

[CarraraWebsiteSolutions]

Cant really most of that code is in php.

[pixelgrid]

on the container element set a max-height equal to the height of the first row.
then on hover animate tthe max height to a large number enough to show all your data like 2000px

.container{
max-height:200px;
transition:max-height 0.5s linear;
overflow:hidden;
}

.container:hover{
max-height:2000px;
}

the transition property will need to be vendor prefixed (-moz-,-webkit-)

[CarraraWebsiteSolutions]

@pixelgrid Ok will give it a try let you know how I go

[CarraraWebsiteSolutions]

@pixelgrid works good had to do this

.box .featured-categories-box-content {
/*border-top:1px solid #DBDEE1;
border-bottom:1px solid #DBDEE1;*/
text-align: center;
border: 1px solid #d4d4d4;
border-radius: 3px;
clear: both;
padding: 10px;
margin: 15px 0;

max-height: 145px;
transition: max-height 0.2s linear;
overflow: hidden;
}
.box .featured-categories-box-content:hover {
max-height:2000px;
}

[Author]

Posts