Jquery 地铁式瓷砖

我需要一些帮助来完成我关于metro风格瓷砖的工作

我的第一个问题是主容器div元素看起来不像我想要的（背景和大小） 第二个有点复杂。如果您选中下面的链接，您可以看到灰色的div元素，当鼠标不悬停在图像上时，该元素不应出现。我只想看到描述div，当我在图像上悬停时，看到div像透明div一样被部分动画化。像编码一样，我的灰色div看起来像是在所有元素之上

HTML:

<div class="kutu">
    <div class="icerik">
        <img alt="Resim" src />
    </div>
    <div class="metin">
        <div class="metinBaslikAlani"></div>
        <div class="metinBaslik">Slogan</div>
        <div class="adet"><span>4</span></div>
        <div class="metinIcerik">Herkese Ulaşıyoruz</div>
    </div>
</div>

$('.kutu').hover(function () {
    $(this).css("border", "5px solid #FFFF00");
    $(this).css("margin", "1px 3px 1px 3px");
    $(this).css("cursor", "pointer");

    $(this).find(".metin").stop().animate({ 
        top: "-168px" 
    }, 300);
});

---

尝试在yout.kutu样式中使用css属性

溢出

和值

隐藏

：

.kutu {
    ...
    overflow: hidden;
}

看看更新的小提琴：