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>