Grow your CSS skills. Land your dream job.

Overflow Hidden Question

  • # July 5, 2013 at 1:47 am

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

    # July 5, 2013 at 2:34 am

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

    # July 5, 2013 at 3:21 am

    Cant really most of that code is in php.

    # July 5, 2013 at 3:36 am

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

    # July 5, 2013 at 3:52 am

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

    # July 5, 2013 at 4:32 am

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".