Images with tinting

By Ken Hawkins

visuals layout images built-in depreciated Requires EBI Visual Framework 1.1.0, 1.2.0

You can enhance the "Images with captions" pattern by adding class .with-overlay 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
<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>
JS

Similar Building Blocks

media

Images with captions
media

Colors / colours
media

Data Protection Banner