CODEWITHSUNDEEP
htmlcsscss-animations
user3628619
user3628619

Reputation: 13

CSS animation not working on div with text inside it

I have numerous divs on a website that I am building, their is a container div, in which there is an image. Inside this container div I have a second div that using pure css slides up from the bottom of the container to 50% height. I have made a JSFiddle here to show you.

However for some reason when I add text to this smaller sliding div it is static.

My CSS is below

<style>
.maincontentdiv {
    position: relative;
    height: 100px;
    width: 200px;
}
.slideup {
    position: absolute;
    width: 100%;
    bottom: -2px;
    min-height: 0;
    color: #FFF;
    transition: min-height 250ms ease-in;
    background-color: #666666;
    text-align: center;
}
.maincontentdiv:hover > .slideup {
    min-height: 50%;
}
</style>

My html is also below

<div id="cell1">
    <div class="maincontentdiv" style="box-shadow: 5px 5px 5px #999; height: 390px;   background-image: url(square1.png);">
        <div class="slideup">
            Regional College Students............... here is some content.  I need this div with all the writing in it to begin its animation from the bottom like the other empty divs that I have produced and I have no idea how to do it so if you can help... PLLLLLEEEEAAAAASSSSEEEE DO@ :)
        </div>
    </div> 
    <p></p>
    <div class="maincontentdiv" style="box-shadow: 5px 5px 5px #999; height: 395px; background-image: url(square2.png);">
        <div class="slideup">Ruskin Student Experience</div>
    </div> 
    <p></p>
    <div class="maincontentdiv" style="box-shadow: 5px 5px 5px #999; height: 395px;">
        <div class="slideup">Helping Students at Home</div>
    </div> 
</div>

Upvotes: 1

Views: 4675

Answers (4)

Sgnl
Sgnl

Reputation: 1959

Hope this helps as I was caught by this...

make sure your element has display set to either block or inline-block as having display set to inline, animations won't run on Chrome.

element {
  display: block; /* or `inline-block`. NOT `inline` */
  animation: /* your animation here */
}

Upvotes: 1

Amit
Amit

Reputation: 1919

give height to slideup class

.slideup{
     height:22px;
}

Upvotes: 0

MilkyTech
MilkyTech

Reputation: 1927

all of your .slideup divs are showing their content. transition max-height instead of min-height. see it in this updated fiddle

.maincontentdiv {
    position: relative;
    height: 100px;
    width: 200px;
}
.slideup {
    position: absolute;
    width: 100%;
    bottom: -2px;
    max-height: 0;
    color: #FFF;
    transition: max-height 250ms ease-in;
    background-color: #666666;
    text-align: center;
}
.maincontentdiv:hover > .slideup {
    max-height: 50%;
}

Upvotes: 0

Nawed Khan
Nawed Khan

Reputation: 4401

Give .slideup a height. Like this:

.slideup {
    position: absolute;
    width: 100%;
    bottom: -2px;
    min-height: 0;
    color: #FFF;
    transition: min-height 250ms ease-in;
    background-color: #666666;
    text-align: center;
    height:20px
}

Upvotes: 2

Related Questions