title: smooth transition between html pages
body: <p>When I click on a link, for example in index.html and I click "contact" which is external "contact.html" I want to create a smooth transition. 
  Give me some hints...</p>
  
  <p>Example: </p>
  
  <pre><code>&lt;a id="map"  href="otherPage.html" target="_self"&gt;
       &lt;img src="images/icons/map.png" width="100" height="100"&gt;
  &lt;/a&gt; 
  </code></pre>
  
  <p>I don't want otherPage.html to load immediately, I want it to appear very smoothly/slowly</p>