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
As a simple overlay, just add `.highlight-caption` to an `a` tag.
<div class="row">
<div class="column medium-3">
<a href="#">
<img src="//www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/large/public/groups/external_relations/images/Events/all-at-ebi_stepping_down_EBI.jpg" alt="Staff outside Hindton Hall.">
</a>
<a href="#" class="highlight-caption readmore">Jobs & Careers</a>
</div>
</div>
Or for a bigger and possibly multi-line label, add `.highlight-caption.highlight-caption-big` to an `a` tag, and to the parent `div` add `.position-relative`.
<div class="row">
<div class="position-relative medium-5">
<a href="#" class="block no-underline" style="background: url('https://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/ultra-wide_16_9/public/groups/external_relations/images/wide-imagery/Bioimaging_EMBL-EBI_780x400.jpg?itok=C5S818p3');
height: 350px;
background-size: cover;
"></a>
<div class="highlight-caption highlight-caption-big">
<span class="label white-color">News</span>
|
<span class="label white-color">13 Jun 2017</span>
<h3><a href="#" class="white-color no-underline clearfix">
Open imaging data for biology <br/> on two lines
</a></h3>
</div>
</div>
</div>