Edit in JSFiddle

.page {
    height: 185px;
    background: #FF9900;
    padding: 5px;
    margin: 20px;
    position: relative;
}

.last-page:after {
    position: absolute;
    bottom: 0px;
    content: 'Last page doesnt need any hoverers as there is no screen next to it.';
}

.hoverer {
    height: 50px;
    width: 100%;
    background: #424242;
    margin: 5px;
    position: relative;
}

a {
    display: none;
    position: absolute;
    bottom: -215px;
    z-index: 1;
}

.img {
    width: 50px;
    height: 50px;
    background: #BCBCBC;
}

.hoverer:hover > a {
    display: block;
}

<p>
Hover black boxes and observe how images (light gray boxes) appears on next screen (next big orange box).
</p>
<div class="page">
    <div class="hoverer">       
        <a href="#">
            <div class="img"></div>
        </a>
    </div>
    <div class="hoverer">
        <a href="#">
            <div class="img"></div>
        </a>
    </div>
    <div class="hoverer">
        <a href="#">
            <div class="img"></div>
        </a>
    </div>   
</div>
<div class="page">
    <div class="hoverer">       
        <a href="#">
            <div class="img"></div>
        </a>
    </div>
    <div class="hoverer">
        <a href="#">
            <div class="img"></div>
        </a>
    </div>
    <div class="hoverer">
        <a href="#">
            <div class="img"></div>
        </a>
    </div>    
</div>

<div class="page last-page">

</div>