Hover image tiles

The hover image tile allows you to create a nice visual representation of the link which then changes as you hover over and allows you to click through to the link.

Guidance for hover settings

Always use the hover image tiles at 3 across or 4 across - they won't display well on smaller screens if you use 6 across.


Select an image rendition of 'Square (400 x 400)' or 'Tall (300 x 400)'.

Text, background, hover text and opacity

The heading text and hover over text should be set to white and the hover background colour to #323232. Always use a hover opacity of between 50% and 100%.


If the image used on a hover tile is light, you can apply a gradient using the tickbox in the web part properties to make text easier to read - this is down to your judgment.