We might want to add a small description mask for each of the zoom areas available. In the mask, we also want the user to be able to move between the zoomed areas using small arrows.
First of all let's define the HTML needed: there will be four masks, one for each of the three commands, and one for the central area. We can add the required markup just after the </section> tag:
<div id="mask">
<div data-detail="italy">
<span>Help text. Click the arrows to explore more.</span>
<menu>
<a role="button" aria-label="move down"
href="#italy2">▼</a>
</menu>
</div>
<div data-detail="italy2">
<span>Help text. Click the arrows to explore more.</span>
<menu>
<a role="button" aria-label="move left"
href="#montreal">>◄</a>
<a role="button" aria-label="move up"
href="#italy">▲</a><a role="button" aria...