css transition not working at hidden div

Question

I have a hidden div. I want that div will appear and hidden smoothly. I've applied this CSS which is not working! What's the reason for it?

HTML:

<div class="a">
    <p>Hover Me</p>
    <div class="box">
        Some Text Some Text Some Text Some Text Some Text Some Text
    </div>
</div>

CSS:

.box {
    width: 500px;
    border: 1px solid #ccc;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.a:hover .box {
    visibility: visible;
    transition: height 0.1s ease;
    height: auto;
}

Fiddle Work

As [this question shows](http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto) "You can't currently animate on height when one of the heights involved is auto, you have to set two explicit heights." Also, your transition should be in the element's original state, not the hover. — j08691, Jul 14 '14 at 19:27
What type of solution do you want? You can do the smooth transition with css3 or javascript? — etr, Jul 14 '14 at 19:27
I can't apply fixed height. I've to apply auto height because the texts/elements of div.box isn't fixed. So, I never know the actual size of div.box — user1896653, Jul 14 '14 at 19:29

score 0 · Answer 1 · answered Jul 14 '14 at 20:42

If you're ok with using jQuery you can use this for a nice smooth transition in and out of hover events.

jQuery

$('.a p').hover(function () {
    if ($('.box').hasClass('active')) {
        $('.box').removeClass('active');
        $('.box').stop(true, false).animate({height: "0px"}, 500);
    } else {
        $('.box').addClass('active');
        $('.box').stop(true, false).animate({height: "20px"}, 500);
    }
});

Here is a jsFiddle

score -1 · Answer 2 · answered Jul 14 '14 at 19:27

-1

Try using opacity instead:

.box {
    width: 500px;
    border: 1px solid #ccc;
    opacity:0;
    height: 0;
    overflow: hidden;
}
.a:hover .box {
    opacity:1;
    transition: height 0.1s ease;
    transition-property: opacity;
    height: auto;
}

http://jsfiddle.net/5rE47/

answered Jul 14 '14 at 19:27

ssergei

1,289
9
21

Incorrect. The transition needs to be on .box, not .a:hover .box. – Jason Jul 14 '14 at 19:45
New to CSS3, how come having transition on .a:hover .box works? – ssergei Jul 14 '14 at 19:54
1

It kinda works. The transition will only be in enter, not exit. Upon mouse exiting the hover, the transition would immediately be removed. Transition on the .box allows the hover to transition out. – Jason Jul 14 '14 at 19:57

Jason · Answer 3 · 2014-07-14T19:59:08.780

-1

http://jsfiddle.net/jap4u/5/

Should be cross-browser as well...

.a {
    width: 100px;
    height: 200px;
}
.box {
    width: 100%;
    border: 1px solid #ccc;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}
.a:hover .box {
    max-height: 999px;
    opacity: 1;
}

As an aside, a class of "a" is strange practice. It will work, but may consider renaming that. Note that the box height is set, not auto. This version appears to work with variable heights.

edited Jul 14 '14 at 19:59

answered Jul 14 '14 at 19:43

Jason

4,079
4
22
32

But, I can't apply fixed height at .a:hover .box :( – user1896653 Jul 14 '14 at 19:47

css transition not working at hidden div

3 Answers3