Metro Style Tiles

Question

I need some help to finish my work about metro style tiles.

My first problem is main container div element is not looking like what I want (background and size) Second one is a little bit complicated. If you check the link below, you can see greyed div element which should not be when mouse does not hover on images. I just want to see description divs when I hover on images and see div partially animated up like transparented div. Like coded my greyed div comes like it is on top of all elements

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

Try use css-property overflow with value hidden in yout .kutu styles:

.kutu {
    ...
    overflow: hidden;
}

Look at updated fiddle: http://jsfiddle.net/ArtemFitiskin/H4vbB/55/