<ul class="lavaLamp"> 
             <li><a href="#">Home</a></li> <li> <a href="#"> Inicio </ a> </ li> 
             <li><a href="#">Plant a tree</a></li> <li> <a href="#"> Planta un árbol </ a> </ li> 
             <li><a href="#">Travel</a></li> <li> <a href="#"> Viajes </ a> </ li> 
             <li><a href="#">Ride an elephant</a></li> <li> <a href="#"> paseo un elefante </ a> </ li> 
         </ul> </ ul>

/ * Estilos para la totalidad del menú LavaLamp * / 
 .lavaLamp { . lavaLamp ( 
     position: relative; posición: pariente; 
     height: 29px; width: 421px; altura: 29px; ancho: 421px; 
     background: url("../image/bg.gif") no-repeat top; fondo: url ("../ imagen / bg.gif ") no-repeat top; 
     padding: 15px; margin: 10px 0; padding: 15px; margin: 10px 0; 
     overflow: hidden; desbordamiento: oculto; 
 } ) 
     /* Force the list to flow horizontally */ / * Fuerza de la lista para el flujo horizontal * / 
     .lavaLamp li { . lavaLamp li ( 
         float: left; flotador: izquierda; 
         list-style: none; lista de estilo: ninguno; 
     } ) 
         /* Represents the background of the highlighted menu-item. / * Representa el fondo del menú resaltado. */ * / 
         .lavaLamp li.back { . lavaLamp li.back ( 
             background: url("../image/lava.gif") no-repeat right -30px; fondo: url ("../ imagen / lava.gif ") no se repita la derecha 30px; 
             width: 9px; height: 30px; anchura: 9PX; altura: 30px; 
             z-index: 8; z-index: 8; 
             position: absolute; position: absolute; 
         } ) 
             .lavaLamp li.back .left { . lavaLamp li.back. izquierda ( 
                 background: url("../image/lava.gif") no-repeat top left; fondo: url ("../ imagen / lava.gif ") de no repetir parte superior izquierda; 
                 height: 30px; altura: 30px; 
                 margin-right: 9px; margen derecha: 9PX; 
             } ) 
         /* Styles for each menu-item. / * Estilos para cada menú. */ * / 
         .lavaLamp li a { . lavaLamp una li ( 
             position: relative; overflow: hidden; posición: pariente; desbordamiento: oculto; 
             text-decoration: none; text-decoration: none; 
             text-transform: uppercase; texto-transformar: mayúsculas; 
             font: bold 14px arial; font: 14px Arial negrita; 
             color: #fff; outline: none; color: # fff; esbozo: ninguno; 
             text-align: center; alinear texto: centro; 
             height: 30px; top: 7px; altura: 30px; arriba: 7px; 
             z-index: 10; letter-spacing: 0; z-index: 10; carta de espaciamiento: 0; 
             float: left; display: block; flotador: izquierda; pantalla: bloque; 
             margin: auto 10px; margin: 10px auto; 
         } )

 <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jquery.js"> </ script> 
 <script type="text/javascript" src="path/to/jquery.lavalamp.js"></script> <script type="text/javascript" src="path/to/jquery.lavalamp.js"> </ script> 
 <!-- Optional --> <! - Opcional -> 
 <script type="text/javascript" src="path/to/jquery.easing.js"></script> <script type="text/javascript" src="path/to/jquery.easing.js"> </ script> 
 
 <script type="text/javascript"> <script type="text/javascript"> 
     $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })}); $ (function () ($ ( ". lavaLamp"). lavaLamp ((fx: "backout", velocidad: 700 })}); 
 </script> </ script>

<ul class="menu">
    <li><a href="http://zacss.com" class="mn1" title="Zona"></a></li>
    <li><a href="http://zacss.com" class="mn2" title="Del Arte"></a></li>
    <li><a href="http://zacss.com" class="mn3" title="CSS"></a></li>
</ul>

.menu{left:500px;margin-left:-250px;position:absolute;top:50px;width:500px;display:block;}
.menu li{display:inline;}
.mn1, .mn2, .mn3{height:131px;width:138px;background:url(img_sprite_css.jpg);display:block;float:left;margin:0 10px;}
/*Dejo vacia y sin posicion aqui ya que en este caso la imagen que deseamos se encuentra en "0 0" o bien la posicion que queremos*/
.mn1{}
/*Ahora si es importante ya que con el "hover" la posicion tiene que cambiar y debemos darsela de la siguiente manera*/
.mn1:hover{background-position:0 131px;}
.mn2{background-position:138px 0;}
.mn2:hover{background-position:138px 131px;}
.mn3{background-position:283px 0;}
.mn3:hover{background-position:283px 131px;}

<div id="pageflip">
	<a href="#">
		<img src="page_flip.png" alt="" />
		<span class="msg_block">Subscribe via RSS</span>
	</a>
</div>

#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top; /* Imagen oculta a mostrar */
	text-indent: -9999px;
}

$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ // Animacion de nuestro div (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '50px'
		}, 200);

*{margin:0;padding:0;border:0;outline:0;}a{ text-decoration:none;}
.all{margin:20px auto;width:900px;text-align:center;font-family:"Century Gothic";position:relative;}
.dock{ display:block; margin-top:50px;}
.dock li {display:inline-block;}
.dock img {width:86px; opacity: 0.7; -webkit-transition: all 1s ease-in; }
.dock span {position:absolute;top:40px;left:0;opacity:0;-webkit-transition:all 1s ease-out;width:100px;}
.dock li a:hover img, .dock li a:hover span{width:114px;opacity:1; margin-top:20px; vertical-align: bottom;}
.dock li a:hover span{left:45%;}

<div class="all">
	<h1>Menu Dock MacOS solo con CSS Animations</h1>
    <ul class="dock">
        <li><a href="#"><img src="z.jpg" alt="Imagen" /><span>Z - Letra zeta</span></a></li>
        <li><a href="#"><img src="a.jpg" alt="Imagen" /><span>A - Letra a</span></a></li>
        <li><a href="#"><img src="c.jpg" alt="Imagen" /><span>C - Letra ce</span></a></li>
        <li><a href="#"><img src="s.jpg" alt="Imagen" /><span>S - Letra ese</span></a></li>
        <li><a href="#"><img src="s.jpg" alt="Imagen" /><span>S - Letra ese</span></a></li>            
    </ul>
</div>

<script type="text/javascript" src="reflection.js"></script>

<img src="version.png" class="reflect rheight50 ropacity33"  />

<img src="user.png" class="reflect rheight33" alt="Muestra un 33% de la imagen" />
<img src="user.png" class="reflect rheight66" alt="Muestra un 66% de la imagen" />
<img src="user.png" class="reflect rheight100" alt="Muestra un 100% de la imagen" />

<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.mootools.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

 
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.jquery.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

<script type="text/javascript">
  window.addEvent('domready', function(){
    SexyLightbox = new SexyLightBox();
  });
</script>

<script type="text/javascript">
  $(document).ready(function(){
    SexyLightbox.initialize();
  });
</script>

<a href="imagen.jpg" title="some title" rel="sexylightbox">View image</a>

<a href="senorms.jpg"     rel="sexylightbox[galeria]">Link 1</a>
<a href="imagen.jpg"      rel="sexylightbox[galeria]">Link 2</a>
<a href="cualquiera.jpg"  rel="sexylightbox[galeria]">Link 3</a>

SexyLightbox = new SexyLightBox({
  OverlayStyles:{
    'background-color':'#fff',
     'opacity': 0.6
  }
});

SexyLightbox.initialize({
  OverlayStyles:{
    'background-color':'#fff',
     'opacity': 0.6
  }
});

SexyLightbox = new SexyLightBox({color:'white'});

SexyLightbox.initialize({color:'white'});