Images with tinting
You can enhance the "Images with captions" pattern by adding class .with-overlay for a darkened effect with a text overlay.
Standard caption without a link.
If your .inner 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.
Images with tinting HTML
<div class="medium-4 with-overlay">
<img src="http://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="http://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>
Images with tinting Style
You can find the original source of the CSS as .scss
Images with tinting
Have a use case that's not covered?
Please open an issue in the tracker. We'll update this living pattern library with your feedback.