Circle Navigation Effect with CSS3 es una idea que muestran en tympanus.net, aplicado a un slider de imágenes pero, para no complicar mucho las cosas, vamos a ver como generar ese mismo efecto en enlaces comunes y corrientes. Si se entiende la idea, luego pude ser trasladada a otras aplicaciones.
El truco se basa en anidar etiquetas dentro del enlace y de esa manera, poder controlarlas de manera individual:
El truco se basa en anidar etiquetas dentro del enlace y de esa manera, poder controlarlas de manera individual:
<a class="circulo" href="javascpit:void(0);"> <span style="background-image: url(IMAGEN_VISIBLE);"></span> <div style="background-image:url(URL_IMAGEN_OCULTA);"></div> </a>
Los enlaces se muestran como pequeños círculos y, al colocar el cursor encima, se agrandan y muestran una segunda imagen:
Y claro, todo depende del CSS:
<style>
/* los enlaces pueden tener cualquier dimensión */
a.circulo {
display: inline-block;
height: 46px;
position: relative;
width: 75px;
}
/* la etiqueta SPAN contiene la imagen visible */
a.circulo span {
background: #00BE98 url() no-repeat 50% 50%; /* la imagen es un fondo */
display: block;
cursor: pointer;
/* la dimensión de la imagen */
height: 46px;
width: 46px;
border-radius: 23px; /* se ve como círculo con un radio que es la mitad de su tamaño */
/* la posicionamos de manera absoluta en el centro */
position: absolute;
top: 50%;
left: 50%;
/* le ponemos márgenes negativos arriba y a la izquierda para centrarla */
margin: -23px 0 0 -23px;
/* la animación */
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* la imagen oculta */
a.circulo div {
background: transparent url() no-repeat center center;
height: 0;
left: 50%;
margin: 0;
overflow: hidden;
position: absolute;
top: 50%;
width: 0;
z-index: 100;
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/* al poner el cursor encima del enlace */
/* la etiqueta SPAN se "agranda" */
a.circulo:hover span {
border-radius: 75px;
height: 150px;
margin: -75px 0 0 -75px;
opacity: 0.6;
width: 150px;
}
/* la etiqueta DIV se hace visible */
a.circulo:hover div {
border-radius: 75px;
height: 150px;
margin: -75px 0 0 -75px;
width: 150px;
}
</style>
Quienes no posean un navegador que interprete CSS3, pueden ver el resultado haciendo 
