Hover to trigger display:block.

Example for my blog post.

HTML

<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="https://s2.glbimg.com/LPD0h0MJbTdMLUq2Hu6NX4drCpI=/0x0:1700x1065/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/F/f/2a0zxsQZ274A7QazcOpg/van-pirata.jpg">
            <div class="img"></div>
        </a>
    </div>
    <div class="hoverer">
        <a href="#">
            <div class="img"></div>
        </a>
    </div>
    <div class="hoverer">
        <a href="https://s2.glbimg.com/_E1459IeTqhlHR7clfQLMqk1yc8=/0x0:3000x1607/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/g/l/NNWktHQqydZpuPhAycww/helicoptero.jpg">
            <div class="img"></div>
        </a>
    </div>   
</div>
<div class="page">
    <div class="hoverer">       
        <a href="https://s2.glbimg.com/LgBkItsaHLAeSQOCX4OaL9wd1Io=/0x0:854x480/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/3/b/Au7PPqQA6Ieb0G6Z8AqA/servico-febre-amarela-17-01-2018.jpeg">
            <div class="img"></div>
        </a>
    </div>
    <div class="hoverer">
        <a href="#">
            <div class="img"></div>
        </a>
    </div>
    <div class="hoverer">
        <a href="https://s2.glbimg.com/LPD0h0MJbTdMLUq2Hu6NX4drCpI=/0x0:1700x1065/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/F/f/2a0zxsQZ274A7QazcOpg/van-pirata.jpg">
            <div class="img"></div>
        </a>
    </div>    
</div>

<div class="page last-page">

</div>

CSS

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