jquery - 悬停动画后无法弄清楚如何使文本显示在div中

当您将鼠标悬停在它们上方时，我有3个从底部开始的div。我正在尝试使文本显示在增长的部分中。换句话说，我正在努力做到这一点，以便当用户将鼠标悬停在div上时，底部将向下扩展并显示一些文本。如果您看下面的代码，这将更有意义。

我已经尝试了所有我能想到的。创建一个文本默认值为0的div，然后随动画一起增长。使用jquery动态添加文本（最终看起来确实很草率，很难对我进行正确格式化），并在每个div下隐藏文本，不透明度为0，并在您悬停时淡入（再次，这种方法行得通，但是我无法弄清楚如何使其看起来不错）

下面的代码是悬停动画的基本内容，而我没有做出任何丑陋的尝试将文本添加到其中。我事先表示歉意，因为这可能还不是很干净（我仍在对其进行调整）。

MY CODE (CODEPEN)

这是我的代码：

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 :(

最佳答案

这个怎么样？

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

我不熟悉SCSS，所以请原谅我仅使用CSS。我基本上在父悬停时切换添加的div的可见性状态。我也使用绝对定位对div进行定位。其余的部分留给您，但是如果您有任何疑问，我希望这是您想要的！

我也将父母的位置改为亲戚，以使他能绝对地工作。

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