slideup

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<style>

#showcaseClose {
    background-image: url("_thework/allwork_showcase_close.png");
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 27px;
    position: absolute;
    right: 16.5%;
    top: 1685px;
    width: 28px;
}

#openWork img {
    height: 500px;
    left: 20%;
    position: relative;
    width: 500px;
    border:1px solid #f88;
}


#firstBlockwrap {
    width: 776px;
    margin: 0 auto;
}

ul.block {
    height: 1635px;
    margin: 0 0 40px;
    max-width: 1081px;
    overflow: hidden;
    position: relative;
    width: 100.2%;
}

ul.block li {
    background: none repeat scroll 0 0 #999999;
    float: left;
    overflow: hidden;
    position: absolute;
}

li.block1{ width: 190px; height: 166px; top: 0; left:0; }
li.block2{ width: 190px; height: 255px; top: 0; left:25%; }
li.block3{ width: 190px; height: 128px; top: 0; left:50%; }


.openWorkWrapper{
    background: rgba(0,0,0,.4);
    width: 100%;
    height: 700px;
}

#main{
    width: 960px;
    margin: auto;
}

</style>
<link rel="author" href="humans.txt">
</head>
<body>

<div id="main">
<div id="firstBlockwrap" class="block-wrap">

<ul class="block">
<li id="mosaico" class="block3 shadow-inset">
    <img width="190" height="128" alt="a-toda-hora" class="attachment-block_8 wp-post-image" src="images/portfolio/a-toda-hora.png">
</li><!-- #post-2264 -->

<li id="mosaico" class="block2 shadow-inset">
    <a href="images/portfolio/tu-me-lees.png" rel="prettyPhoto[gallery]" class="hoverstuff-zoom"><i class="icon-zoom-in"></i></a>
    <a href="http://localhost/?myportfoliotype=2" class="hoverstuff-link"><i class="icon-link"></i></a>

    <div class="inside" style="opacity: 0;">
        <h2><a href="http://localhost/?myportfoliotype=2">2</a></h2>
    </div>
    <img width="190" height="255" alt="tu-me-lees" class="attachment-block_8 wp-post-image" src="images/portfolio/tu-me-lees.png">
</li><!-- #post-2263 -->


<li id="mosaico" class="block1 shadow-inset">
    <a href="images/portfolio/terra.png" rel="prettyPhoto[gallery]" class="hoverstuff-zoom"><i class="icon-zoom-in"></i></a <a href="http://localhost/?myportfoliotype=1" class="hoverstuff-link"><i class="icon-link"></i></a>
    <div class="inside" style="opacity: 0;">
        <h2><a href="http://localhost/?myportfoliotype=1">1</a></h2>
    </div>
    <img width="190" height="166" alt="terra" class="attachment-block_6 wp-post-image" src="images/portfolio/terra.png">
</li><!-- #post-2261 -->
</ul>

<div class="openWorkWrapper" id="openWork">
    <div id="showcaseClose">close</div>
</div>

</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
    var $open = $('.openWorkWrapper'),
    $img= $('#firstBlockwrap').find('img'),
    $shCase = $('#showcaseClose'),
    $ventana = $('html, body');
    $open.hide();
    $img.on('click', function(){
        var $clicked = $(this);
        $open.slideDown();
        $clicked.clone().appendTo($open);
        $ventana.animate({scrollTop:1600}, 300);

        if ($open.children().length > 2) {
            $open.children().eq(1).remove();
        };
        console.log($open.children().length);
    });
    $shCase.on('click',function(){
        $open.children().remove('img');
        $open.slideUp();
        $('html, body').animate({scrollTop:500}, 300);
    });
});
</script>
</body>
</html>