Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Overflow Hidden Question

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #46123

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

    #141625

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

    #141630

    Cant really most of that code is in php.

    #141631
    pixelgrid
    Participant

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

    #141632

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

    #141621

    @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)
  • The forum ‘CSS’ is closed to new topics and replies.