jQuery hide/reveal image banner
<p>I am hoping someone can provide assistance with a jQuery issue I have. I have been asked to produce a banner which hides/reveals part of an image or div. I am a designer who's skills are limited to HTML and CSS and have no great experience in coding jQuery.</p>

<p>The overall banner is 100% in width split into two equal 50% portions, both images have an overlay caption which doubles as a link.</p>

<p>Upon clicking the linked caption, 75% of the image is then shown, overlaying 25% of the other image, this will be the same for both sides of the banner.</p>

<p>The mark up I have for the banner is:</p>

<pre><code>    &lt;div class="home-banner-left"&gt;
       &lt;img src="home-left.jpg" /&gt;
       &lt;div class="home-overlay-left"&gt;
              &lt;h1&gt;
                  &lt;a href="page.html"&gt;This is a link&lt;/a&gt;
              &lt;/h1&gt;
       &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="home-banner-right"&gt;
       &lt;img src="home-right.jpg" /&gt;
       &lt;div class="home-overlay-right"&gt;
              &lt;h1&gt;
                  &lt;a href="page2.html"&gt;This is a link&lt;/a&gt;
              &lt;/h1&gt;
       &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Any help would be greatly appreciated. Please ask if further information is needed.</p>
