Implementation code
Get a zip with all the sample HTML and any spaecial CSS or JS needed:
Download a ZIP file
More on how to use this
<div class="medium-4 with-overlay">
<img src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/large/public/groups/external_relations/images/News/DREAMchallenge_News_24_03_16_EBI.jpg?itok=-33Ign4S" alt="Photo of Uranus.">
<div class="caption">
<div class="inner">
Standard caption without a link.
</div>
</div>
</div>
<p>If your <code>.inner</code> element is a link, the text automatically takes on a large font face and arrow. This style is best used as an image button to tease and link further content.</p>
<div class="medium-4 with-overlay">
<img src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/large/public/groups/external_relations/images/News/TCell_news_EBI.jpg?itok=b_KTDxDO" alt="Photo of Uranus.">
<div class="caption">
<a href="http://www.embl.de/" class="inner">
As a linked button
</a>
</div>
</div>