First, we'll create the underlying page on which the example will run.
Add the following HTML to the
<body>
tag of our template file:<article> <h1>The Article Title</h1> <p><img id="image1-thumb" class="expander" alt="An ASCIIZebra" src="img/ascii.gif" width="150" height="100">Lorem ipsum dolor...</p> <p><img id="image2-thumb" class="expander" alt="An ASCII Zebra" src="img/ascii2.gif" width="100" height="100">Lorem ipsum dolor...</p> </article>
Save the example page as
animate-size.html
. We'll keep the styling light in this example; in a new file in your text editor, add the following code:article { display:block; width:800px; margin:auto; z-index:0; font:normal 18px "Nimbus Sans L", "Helvetica Neue", "Franklin Gothic Medium", sans-serif; } article p { margin:0 0 20px; width:800px; font:15px Verdana, sans-serif; line-height...