Javascript 另一个Div下的Div，并在悬停状态下随过渡显示

我想做一些看起来简单的事情，但我找不到解决办法。 我有类似的东西

           <main>
              <div class="prod_container">
                <div class="prod_box box1">
                    <img alt="product" src="images/prod1.png">
                    <h3>bibendum nec</h3>
                    <div class="prod_text hidden">
                        <p>Der neue bibendum nec nunc eleifend, posuere facilisis mi Jeep</p>
                        <a class="prod_button" href="#">More</a>
                    </div>
                </div>
                <div class="prod_box box2">
                    <img alt="product" src="images/prod2.png">
                    <h3>condimentum dapibus</h3>
                    <div class="prod_text hidden">
                        <p>Der neue bibendum nec nunc eleifend, posuere facilisis mi Jeep</p>
                        <a class="prod_button" href="#">More</a>
                    </div>
                </div>
                <div class="prod_box box3">
                    <img alt="product" src="images/prod3.png">
                    <h3>facilisis purus</h3>
                    <div class="prod_text hidden">
                        <p>Der neue bibendum nec nunc eleifend, posuere facilisis mi Jeep</p>
                        <a class="prod_button" href="#">More</a>
                    </div>
                </div>
              </div>
            <main>
<footer></footer>

在这里，我想要实现的是，加载时所有三个框的class.prod_文本都必须位于页脚下方，当鼠标悬停在class.prod_框上时，prod_文本必须向上滑动才能显示。但当我这样做时，.prod_框和.prod_文本的边框显示在页脚上方，img显示在页脚下方（我应用了位置：相对；底部：-100px；）

我需要一种效果，就像我们从牌堆中挑选一张牌一样

请检查一下

提前谢谢你想要这个吗

HTML Javascript（别忘了提到JQuery 1.6.x或更高版本）

---

显示您的javascript代码。@VaibhavKatole我到现在为止还没有添加任何js，因为我不知道如何使用css样式使该div位于页脚下方。请帮助这不是在上提问的方式，所以请展示一些您迄今为止尝试过的代码。很抱歉，我是第一个stackoverflow。@CodeName 44您不应该期望人们为您完成所有任务。相反，您应该自己尝试一下，如果您在过程中遇到了问题，请告诉我们。谢谢@KarthikN，但如何做到这一点。prod_text div hide under footer？表示每个.prod_框的第二部分必须隐藏在footer后面。这是我面临的首要问题。更重要的是，这里的文本显示在悬停状态。但我想实现的是，当鼠标悬停在产品盒上时，它必须向上滑动以显示产品文本，就像我们从它的堆栈中拾取一张卡片一样。检查他添加的小提琴链接。请经历一下，在那里我试着实现了什么，但没有成功。来聊聊你提供的小提琴链接谢谢你，卡蒂克。成功了。

    .prod_box { float:left; width:300px; border:2px solid #cccccc; margin:0 10px 0; position:relative;}
    .prod_box img { float:left; width:100%;}
    .prod_text { width:100%; float:left; border-top:none; padding:10px;}
    footer { float:left; width:100%; background-color:#fedf46; padding:20px 0; z-index:999; clear:both;}

<ul class="prod_list">
    <li><a href="#"><img src="http://www.hdwallpapers.in/walls/yamaha_r6_bike-HD.jpg" alt="Bike 01" /><span>Yamaha Bike 01</span></a></li>
    <li><a href="#"><img src="http://hdnewwallpapers.com/wp-content/uploads/2014/04/bmw-hd-race-bike-wallpapers.jpg" alt="Bike 02" /><span>Yamaha Bike 02</span></a></li>
    <li><a href="#"><img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2013/12/bike-wallpaper-12.jpg" alt="Bike 03" /><span>Yamaha Bike 03</span></a></li>    
</ul>

*{margin:0; padding:0; font-family:Tahoma; font-size:12px; color:#333;}
ul, li{list-style:none;}
.prod_list{margin:10px;}
.prod_list li a{width:135px; height:135px; margin:0 12px 12px 0; overflow:hidden; display:inline-block; padding:2px; border:2px solid #ddd; position:relative; float:left;}
.prod_list li a img{width:135px; height:135px; overflow:hidden;}
.prod_list li a span{width:125px; position:absolute; margin-bottom:-25px; bottom:0; left:2px; background:url('http://css-tricks.com/wp-content/csstricks-uploads/transpBlack25.png') 0 0 repeat; color:#fff; line-height:18px; padding:5px 5px 0;}
.prod_list li a:hover{border:2px solid #bbb;}
.prod_list li a:hover span{display:block;}

    $('.prod_list li a').mouseover(function() {
        $(this).find("span").animate({marginBottom:"2px"},"fast");
    });
    $('.prod_list li a').mouseleave(function() {
        $(this).find("span").animate({marginBottom:"-25px"},"fast");
    });