Image highlight captions

By Ken Hawkins

visuals layout images built-in captions Requires EBI Visual Framework 1.2.0

Add labels atop images with .highlight-caption for a darkened effect with a text overlay.

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how


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

HTML
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 &amp; 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>



JS