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>

    CSS Howto..

    How to Create a CSS3 Animated Circle that chages colors when clicked?

    jQuery - How to aply custom CSS to fields which are not empty

    How to make images to go out of the div when width is over the max-width?

    How to set select box height in jquery moblie?

    ExtJS - How to customize buttons?

    show hidden div below current row of divs in responsive layout with jquery

    how to choose what transform is applied first in css

    How to implement small text list search functionality using CSS attribute selectors

    How to correct CSS formatting problem in Visual Studio

    hyperlink inheriting color, how to overcome

    How to inject javascript var into css

    How to reanimate div with jquery after using css keyframe animation

    How to make a custom select option menu style without image in CSS?

    How do I have a border-bottom on all except the last item

    Get the Navbar to show when hovering over header image

    How to make slanted ribbon

    How can I force a list item to display on one line with CSS?

    How to apply effects to a unicode character in CSS? [closed]

    How do I make a table show a vertical scroll bar without explicitly setting the height?

    How can you keep the “theme” of your website and add new dynamic pages? [closed]

    How can I make a span stretch the available space between to other spans?

    HTML4 strict: border=“0” is deprecated, how to replace it

    How can I format outer table but not inner table

    How to bypass an overriding CSS Declaration

    Showing different in Internet Explorer and Google Chrome

    How to get actual (not original) height of a CSS-rotated element

    Li tag is not aligning correctly in Chrome. How to fix it?

    How to default a custom-styled dropdown to browser default style dropdown

    How to use a variable for a path with Stylus?

    how to animate with CSS?