.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>