Overlay class

Note: this can be done three ways. The first way is a four column layout, the second way is a three column layout, and the third way is a two column layout. This will create an overlay on the image with a title. All divs and classes must be there for this to work.

This code can be seen here, Examples

<div class="four-column">
   <div class="column caption-overlay-home">
       <figure>
           <a href="#">
               <img src="#" alt="">
               <figcaption><h2>**overlay title goes here**</h2></figcaption>
           </a>
         </figure>
   </div>
   <div class="column caption-overlay-home">
       <figure>
           <a href="#">
               <img src="#" alt="">
               <figcaption><h2>**overlay title goes here**</h2></figcaption>
           </a>
         </figure>
   </div>
   <div class="column caption-overlay-home">
       <figure>
           <a href="#">
               <img src="#" alt="">
               <figcaption><h2>**overlay title goes here**</h2></figcaption>
           </a>
         </figure>
   </div>
   <div class="column caption-overlay-home">
       <figure>
           <a href="#">
               <img src="#" alt="">
               <figcaption><h2>**overlay title goes here**</h2></figcaption>
           </a>
         </figure>
   </div>
</div>

<div class="three-column">
    <div class="column caption-overlay-home">
        <figure>
            <a href="#">
                <img src="#" alt="">
                <figcaption><h2>**overlay title goes here**</h2></figcaption>
            </a>
          </figure>
    </div>
    <div class="column caption-overlay-home">
        <figure>
            <a href="#">
                <img src="#" alt="">
                <figcaption><h2>**overlay title goes here**</h2></figcaption>
            </a>
          </figure>
    </div>
    <div class="column caption-overlay-home">
        <figure>
            <a href="#">
                <img src="#" alt="">
                <figcaption><h2>**overlay title goes here**</h2></figcaption>
            </a>
          </figure>
    </div>
</div>

<div class="two-column">
    <div class="column caption-overlay-home">
        <figure>
            <a href="#">
                <img src="#" alt="">
                <figcaption><h2>**overlay title goes here**</h2></figcaption>
            </a>
          </figure>
    </div>
    <div class="column caption-overlay-home">
        <figure>
            <a href="#">
                <img src="#" alt="">
                <figcaption><h2>**overlay title goes here**</h2></figcaption>
            </a>
          </figure>
    </div>
</div>