Question

I have a html structure shown as image. Is there any way to get those images which are not full visible (last row) when the container is set as overflow hidden? I am able to get images which are hidden.

Answer 1

You can use this custom selector to find elements not overflowing their parents:

jQuery.extend(jQuery.expr[':'], {
    inparent: function(el) {
        var $el = $(el),
        parent = $el.parent();
        if ($el.offset().top >= parent.offset().top && 
            $el.offset().top + $el.outerHeight(true) <= parent.offset().top + parent.outerHeight(true) && 
            $el.offset().left >= parent.offset().left && 
            $el.offset().left + $el.outerWidth(true) <= parent.offset().left + parent.outerWidth(true)) 
        {
            return true;
        }
        return false;
    }
});

You can then find the images which are partially or fully hidden using:

var visibleimg = $('#container > img:not(:inparent)');