地铁风格瓷砖

Question

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

我的第一个问题是主容器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>

JavaScript:

$('.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);
});

http://jsfiddle.net/H4vbB/54/

Answer 1

尝试在yout overflow样式中使用带有值hidden的css-property .kutu：

.kutu {
    ...
    overflow: hidden;
}

看看更新的小提琴：http://jsfiddle.net/ArtemFitiskin/H4vbB/55/