El efecto bubble

En aext.net nos muestran dos formas de crear el efecto burbuja en los enlaces, es decir, que cuando coloquemos el cursor sobre un enlace con una imagen, esta se amplie. Entre ambos, me quedo con el de los sprites ya que es la técnica que me parece más adecuada y la que menos recursos requiere; sólo necesitamos una imagen y un poco de CSS.

En este ejemplo, esa imagen tiene 300x600 y es un rectángulo dividido en sectores de 150x150, por lo tanto cada imagen la podemos ubicar con un poco de aritmética.

• demoBubble1
• demoBubble2
• demoBubble3
• demoBubble4

Veamos el CSS:

#bubble { /* el contenedor que en este caso será una lista */
  list-style: none;
  margin: 0;
  padding: 0;
}
#bubble li { /* cada item de esa lista */
  display: inline-block;  /* o usar float:left si se quiere que sea compatible con versiones anteriores a IE8 */
  margin: 0;
  padding: 0;
}
#bubble li a.icon { /* una clase general para los items, donde agregamos el sprite */
  background: url(URL_imagen) no-repeat;
  border: none;
  display: block;
  height: 150px; /* el alto de cada sector */
  text-indent: -9999px;  /* la ocultamos */
  width: 150px; /* el ancho de cada sector */
}

/* ahora, posicionamos el fondo para cada item y para su efecto hover */

#bubble li a.demoBubble1 { background-position: -150px 0px; }
#bubble li a.demoBubble1:hover { background-position: 0px 0px; }

#bubble li a.demoBubble2 { background-position: -150px -150px; }
#bubble li a.demoBubble2:hover { background-position: 0px -150px; }

#bubble li a.demoBubble3 { background-position: -150px -300px; }
#bubble li a.demoBubble3:hover { background-position: 0px -300px; }

#bubble li a.demoBubble4 { background-position: -150px -450px; }
#bubble li a.demoBubble4:hover { background-position: 0px -450px; }

¿Cómo lo usamos? Creando una lista:

<ul id="bubble">
  <li><a class="icon demoBubble1" href="javascript:void(0);">demoBubble1</a></li>
  <li><a class="icon demoBubble2" href="javascript:void(0);">demoBubble2</a></li>
  <li><a class="icon demoBubble3" href="javascript:void(0);">demoBubble3</a></li>
  <li><a class="icon demoBubble4" href="javascript:void(0);">demoBubble4</a></li>
</ul>

Aunque siempre es mejor usar imágenes específicas, basta hacer cuentas para usar esta misma técnica y mostrar algo diferente. Por ejemplo, algo similar al llamado Sexy Bookmarks:

• demoBubble1
• demoBubble2
• demoBubble3
• demoBubble4

REFERENCIAS:Utilidades para Webmasters