Metro風格瓷磚

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

嘗試使用CSS屬性overflow與值hidden在YOUT .kutu風格：

.kutu { 
    ... 
    overflow: hidden; 
} 

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