Text over Image
Text over Image
This class gives you the option of laying text over an image or graphic piece. You can modify the font of the text. Text-based titles make your content more accessible and take up fewer storage capacity.
Example
The Code Structure
<div id="header">
<a href="linking the image"><img alt="your alt tag" src="your image source file" /></a>
<div id="header-overlay">
<a href="linking the image overlay">
<span class="header-name" style="font-size: 16px;">OVERLAY TITLE</span></a>
</div>
</div>
Sample Code
<div id="header">
<a href="http://www.uwo.ca/classics/" rel="noopener noreferrer" target="_blank">
<img alt="Classical Studies Department" class="image" height="200" src="http://www.uwo.ca/arts/programs/images/classics290.jpg" width="290" /> </a>
<div id="header-overlay">
<a href="http://www.uwo.ca/classics/" rel="noopener noreferrer" target="_blank">
<span class="header-name" style="font-size: 16px;">Classical Studies</span> </a>
</div>
</div>