Q:

hover effects works strange over ajax loaded content

here it's the website: http://www.webkunst.comeze.com/test/
If you click on the left on artworks, it loads via ajax the page content (the items that appear on the right). The problem I have is that when I hover over the items, it does some kind of strange behavior, for example if I hover over the 4 to 9 items, it shows the hidden text but over the first three items, it's really strange.
This is how I do the effects:
To show the text, this is on my main js:
$(function(){
    $(document).on("mouseover",".item",function(){
        $(this).find(".art_title").fadeIn(200);
     });
     $(document).on("mouseleave",".item",function(){
        $(this).find(".art_title").fadeOut(200);
     });
});

To do the black transparent hover effect i'm using this tutorial :
http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
Which uses css with .item .mask
and this is my markup:

What i'm doing wrong, why is doing that behavior?
I have to add that the effects works nice when the page it's not loaded via ajax.

A:

Give your .item elements position:relative css.
Your absolute .art_title elements are aligning to the top of the page (instead of to the top of the .item

