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>
<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.text-decoration:none;
color:white;
}
.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.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;
}
.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.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);
}
/* 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..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);
}
0 comentarios:
Publicar un comentario
Te fue útil la Información? Entonces deja tu comentario!