Efecto Hover en Elementos Circulares

viernes, 13 de julio de 2012

Ya había publicado por ahí unos ejemplos de unos hovers sobre unas imágenes (Llamativos efectos de hover con CSS), ahora he traido nuevamente un ejemplo similar, pero esta vez con un elemento circular.

El Marco


Para implementar esto lo que haremos sera colocar un enlace y a este enlace es al que le asignaremos las características CSS. También dentro de este enlace, dentro de la etiqueta a colocaremos un texto como encabezado que sera la caption que se mostrara al colocar el cursor encima de la imagen.
<a href="#" class="circle">
     <h3>hovered</h3>
</a>

El CSS


Aquí vamos a definir las propiedades CSS, la imagen que se mostrara como enlace la implementaremos como background.
a:link, a:hover, a:visited {
    text-decoration:none;
    color:white;
}
Ahora definimos las propiedades de el enlace como tal.
.circle {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    font-family:'Kelly Slab', Georgia, serif;
    background: #dda994 url(RUTA IMAGEN) no-repeat center center;
    box-shadow:
        inset 0 0 1px 230px rgba(0,0,0,0.6),
        inset 0 0 0 7px #d5ad94;
    transition: box-shadow 400ms ease-in-out;
    display: block;
    outline: none;
    margin:0 auto;
}
Seguido de esto definimos el atributo de hover. Que en este ejemplo solo variara la sombra.
.circle:hover {
    box-shadow:
        inset 0 0 0 0 rgba(0,0,0,0.6),
        inset 0 0 0 20px #c18167,
        0 0 10px rgba(0,0,0,0.3);
}
Y para terminar con el CSS definimos la propiedades del texto.
/* the text inside */
.circle h3{
    color: transparent;
    font-size: 50px;
    margin-top: 280px;
    text-shadow: 0px 0px 100px #fff;
    text-transform: uppercase;
    font-weight:lighter;
    transition: all 400ms ease-in-out;
}

.circle:hover h3{
    text-shadow: 0px 0px 1px #fff;
    background: rgba(0,0,0,0.3);
}
Para finalizar tenemos la visualización en acción.



Hover para elementos circulares

0 comentarios:

Publicar un comentario

Te fue útil la Información? Entonces deja tu comentario!

 
Click sobre Click © 2012 | Designed by Bubble Shooter, in collaboration with Reseller Hosting , Forum Jual Beli and Business Solutions