CSS pop-up fading

• fade in/out 1
• fade in/out 2

To example with external js-file and only essential code.

Layered javascript

The images are implemented as CSS pop-up images in the html. Javascript is used for the fading mechanism.
In case javascript is not enabled, there will be no fading in / fading out, but the images are still visible as on / off.

CSS

.hoverfade span img {
	position: absolute;
	top: 20px;
	left: 20px;
	margin-left: -9999px;   /* for noscript: css-popup */
	opacity: 1;             /* for noscript: css-popup */
	}
.hoverfade:hover span img {
	margin-left: 0;         /* for noscript: css-popup */
	z-index: 2;
	}

HTML

<ul>
   <li>
      <a class="hoverfade" href="javascript:void()" onmouseover="fadeIn('img-1')" onmouseout="fadeOut('img-1')">
      fade in/out 1<span><img id="img-1" src="images/mtblanc210x140.png" alt=""></span></a>
   </li>
   <li>
      <a class="hoverfade" href="javascript:void()" onmouseover="fadeIn('img-2')" onmouseout="fadeOut('img-2')">
      fade in/out 2<span><img id="img-2" src="images/strand210x140.png" alt=""></span></a>
   </li>
</ul>

Javascript

See source code.

Validating

html-validator | css-validator

Next task: making beautiful unobtrusive javascript of it.