cannot figure out how to make text appear inside div after hover animation

Tags: jquery,html,css,animation,division

Problem :

I have 3 divs that grow from the bottom when you hover over them. I'm trying to make it so that text appears in the section that grew. In other words, I'm trying to make it so that when the user hovers over a div, the bottom will expand downward and reveal some text. This will make more sense if you look at my code below.

I've tried everything I can think of. Creating a div with text in it that defaults to height 0 and then grows with the animation. Using jquery to dynamically add the text (ended up looking really sloppy and very difficult for me to get formatted properly), and hiding text underneath each div with opacity of 0 and fading in in when you hover (again, it sort of worked but I couldn't figure out how to get it to look nice)

The code below is the bare bones of the hover animations without any of my ugly attempts to add the text to them. I apologize in advance as this may not be very clean yet (I'm still tweaking it).

MY CODE (CODEPEN)

Here is my code:

html

<div class="process-steps">
           <div class="process-column">    
                <h2>Design</h2>
                <h2><i class="fa fa-pencil-square-o fa-2x"></i></h2>
            </div>

            <div class="process-column">
                <h2>Develop</h2>
                <h2><i class="fa fa-code fa-2x"></i></h2>
            </div>

            <div class="process-column">
                <h2>Distribute</h2>
                <h2><i class="fa fa-check fa-2x"></i></h2>
            </div>
</div>

CSS:

$green: #4EDE96;
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');

.process-steps
{
    margin: auto;
    width: 85%;
    text-align: center;
    background-color: white;
    height: 500px;

    .process-column
    {
        width: 28%;
        margin: 0 2%;
        min-height: 300px;
        background-color: $green;
        display: inline-block;
        text-align: center;
        border: 3px solid white;
        transition: 0.5s 0 ease;
        top: 0;

        h2
        {
            color: white;
            font-size: 50px;
        }

        &:hover
        {
            border: 3px solid $green;
            background-color: white;
            transition: 0.5s 0 ease;
            padding-bottom: 250px;

            h2
            {
                color: $green;
            }
        }
    }
}

jQuery

//nothing worked :(

---

Solution :

How about this?

http://codepen.io/Leth0_/pen/meJCH

I'm not familiar with SCSS so forgive me for just using CSS. I basicly toggle visibility state of the added div on hover of the parent. I also positioned the div using absolute positioning.I'll leave the rest up to you but if you have questions feel free to ask, I hope it's what you're looking for!

I changed the position of the parent to relative as well to make he absolute positioning work.

css

$green: #4EDE96;
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');

.bottomText{
  position:absolute;
  bottom:0px;
    visibility:hidden;
}

.process-steps
    {
        margin: auto;
        width: 85%;
        text-align: center;
        background-color: white;
        height: 500px;

        .process-column
        {
            width: 28%;
            margin: 0 2%;
            min-height: 300px;
            background-color: $green;
            display: inline-block;
            text-align: center;
            border: 3px solid white;
            transition: 0.5s 0 ease;
            top: 0;
      position:relative;

            h2
            {
                color: white;
                font-size: 50px;
            }

            &:hover
            {
                border: 3px solid $green;
                background-color: white;
                transition: 0.5s 0 ease;
                padding-bottom: 250px;

                h2
                {
                    color: $green;
                }
            }
        }
    }

    .process-column:hover .bottomText{
      visibility:visible;
    }

HTML

<div class="process-steps">
            <div class="process-column">
                <h2>Design</h2>
                <h2><i class="fa fa-pencil-square-o fa-2x"></i></h2>
            <div class="bottomText">This is a test!</div>
            </div>

            <div class="process-column">
                <h2>Develop</h2>
                <h2><i class="fa fa-code fa-2x"></i></h2>
            <div class="bottomText">This is a test!</div>
            </div>

            <div class="process-column">
                <h2>Distribute</h2>
                <h2><i class="fa fa-check fa-2x"></i></h2>
            <div class="bottomText">This is a test!</div>
            </div>
        </div>