Efect - Navigare cu cercuri

---

Efectul de navigare Cercul cu CSS3 este o ideea buna folosita de tympanus.net si care se poate aplica unui slider de imagini, dar pentru a nu complica lucrurile foarte mult, sa vedem cum se genereaza acest efect in mod obisnuit.

Trucul este bazat pe tag-uri adaugate in link, astfel putand fi controlat individual:

<a class="circulo" href="javascpit:void(0);">
<span style="background-image: url(IMAGINE_VIZIBILA);"></span>
<div style="background-image:url(IMAGINE_ASCUNSA);"></div>
</a>

Link-urile sunt prezentate ca cercuri mici, trecerea cursorul (mousul) peste ele mareste si afiseaza o a doua imagine, vezi exemplul de mai jos:

Si, bineinteles, totul depinde de CSS; - Mergi la Desing --> Editati HTML si urmatorul cod css se adauga inaint

<style>
/*link-urile pot avea orice dimensiune */
a.circulo {
display: inline-block;
height: 46px;
position: relative;
width: 75px;
}
/* la etiqueta SPAN contine imaginea vizibila */
a.circulo span {
background: #00BE98 url() no-repeat 50% 50%; /* imaginea este un fundal */
display: block;
cursor: pointer;
/* dimensiunea imagini */
height: 46px;
width: 46px;
border-radius: 23px; /* se vede ca un cerc cu diamentrul jumatate din marime */
/* pozitie absoluta in centru */
position: absolute;
top: 50%;
left: 50%;
/* punem margini negative sus si la stanga pentru centrare */
margin: -23px 0 0 -23px;
/* animatie */
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* imagine ascunsaa */
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;
}
/* trece cursorul pe deasupra imagini */
/* la etiqueta SPAN se "mareste" */
a.circulo:hover span {
border-radius: 75px;
height: 150px;
margin: -75px 0 0 -75px;
opacity: 0.6;
width: 150px;
}
/* tag-ul DIV se face vizibil */
a.circulo:hover div {
border-radius: 75px;
height: 150px;
margin: -75px 0 0 -75px;
width: 150px;
}
</style>

Salveaza modificarile si deja ai instalat un efect interesant pentru un slide de imagini.