Button photos are photos with a caption overlay that link to some content. These can be used for large button styles in a grid as photo navigation.
Style Options
Default Styling [button-photo]
A photo with a caption at the bottom with a subtle gradient to provide text readability.
<a class="button-photo" href="http://www.uoregon.edu/">
<div class="button-photo__photo">
<img src="/image.jpg" alt="Test Image" />
</div>
<span class="button-photo__caption">Photo Caption</span>
</a>
Shade Styling [button-photo--shade]
A photo with a caption at the center with a partially transparent gray shade behind it to provide text readability.
<a class="button-photo button-photo--shade" href="http://www.uoregon.edu/">
<div class="button-photo__photo">
<img src="/image.jpg" alt="Test Image" />
</div>
<span class="button-photo__caption">Photo Caption</span>
</a>
No Shade Styling [button-photo--noshade]
A photo with a caption at the center with no shade to improve legibility. This style should only be used when the photo in use provides very high contrast from the white overlay text.
<a class="button-photo button-photo--noshade" href="http://www.uoregon.edu/">
<div class="button-photo__photo">
<img src="/image.jpg" alt="Test Image" />
</div>
<span class="button-photo__caption">Photo Caption</span>
</a>
Where to use
Photo buttons should be used in a group (often in a grid) as navigation to linked content that shares a common theme, and also can be identified visually. If the linked pages do not have photos that work for them, they should instead be represented by a grid with "Call to Action" buttons (for groups of 5 or less links), or with a "Resource Listing" divided by a grid for a quick, scannable list of links.
Tips for using Photo Buttons
- Avoid overly long text in the photo button. An excess of text can cause it to awkwardly cover the whole image making the text hard to read and obscuring the photo. 2-3 words that display on no more than 2 lines of text is ideal. NOTE: The images may shrink on mobile so even if the text looks good on desktop it may be too wordy for mobile.
- Avoid bright white images. While the gradients of both the shade and default styles should help the text stand out, the white text of the buttons can be hard to read due to low contrast when the image is mostly bright white.
- Try to limit how many photo buttons you use in a grid. There are many great use-cases of photo buttons in a grid, and they often work well with 1 or 2 rows of 4 items. A 3x3 grid of photo buttons can work well in some situations, but as more buttons are in the group it becomes harder and harder to read. If you navigation group has more than 10 items in it then it would probably work better as a list of text links for the sake of readability.
An Ideal Example
Here we have several photo buttons grouped in a grid (a pattern we call "photo navigation"). This is a great example of photo buttons because these links share a similar theme or function, and are represented clearly with photos that make it easy to identify which navigation items is relevent to the user.