Llamativos Efectos de Hover con CSS

miércoles, 4 de julio de 2012

El poder del CSS3 ciertamente es impresionante, para muestra de esto, navegando por ahí, en cierta pagina (Codrops), me encontré con unos tutoriales de unos fantásticos efectos de hover sobre una imagen.
Estos al colocar el cursor sobre la imagen, aparece un titulo una breve descripción y un botón con un link. Aquí he traído la implementación de un par de estos efectos.

Lo primero que haremos sera crear el marco

El Marco


La estructura del marco es muy sencilla. Creamos un contenedor (div) que tendrá la imagen y la información de la descripción.

Dentro de view insertamos un elemento con la clase mask que sera la responsable de que nuestro efecto corra y dentro del cual pondremos un titulo, una descripcion y un link.
<div class="view">
     <img src="RUTA IMAGEN" />
     <div class="mask">
     <h2>TITULO</h2>
     <p>DESCRIPCION</p>
         <a href="#" class="info">Ver Mas</a>
     </div>
</div>


El CSS


Despues de crear nuestro marco, vamos a configurar los estilos.
Primero configuramos las reglas principales y luego añadiremos algunas propiedades especiales para crear dos efectos distintos.
Pero antes hay que decir que todos los tamaños (Anchos y altos) que utilizaremos estarán definidos por las dimensiones de nuestra imagen, yo he trabajado con una imagen de 500 x 200 px.
.view {
    width: 500px;
    height: 200px;
    margin: 10px;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 0 0 5px #666;
    cursor: default;
}
.view .mask, .view .content {
    width: 500px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

Ahora si, veamos dos ejemplos.

Ejemplo 1


Añadimos la etiqueta especial view-first al elemento con la clase view.
<div class="view view-first">
   <img src="RUTA IMAGEN" />
   <div class="mask">
      <h2>TITULO</h2>
      <p>DESCRIPCION</p>
   <a href="#" class="info">READ MORE</a>
   </div>
</div>
En este efecto solo se aplicara algunas transiciones basicas para crear el efecto de hover.
.view-first img {
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(129,225,233, 0.8);
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
Ahora viene el corazón de nuestro efecto, Cuando pongamos el mouse sobre la imagen. Podemos usar la propoidad delay para emular las animaciones. La transicion delay que se usa en el hover puede se alterada, para hacerlo diferente de la clase normal. En este ejemplo no hay no hay ningun delay en la clase normal, pero si esta en el hover, lo que hara que la animacion inicie un poco tarde.
.view-first:hover img {
    transform: scale(1.1);
}
.view-first:hover .mask {
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
   transition-delay: 0.2s;
}


Ejemplo 2


En este segundo ejemplo vamos a añadir la clase especial view-second y usaremos la propiedad translate con el transition-timing-funtion ("control del tiempo"), ease-in-out con la intención de deslizar el contenido hacia la izquierda.
.view-second img {
    transition: all 0.3s ease-in-out;
}
.view-second .mask {
    background-color: rgba(129,225,233,0.8);
    transform: translateX(-500px);
    opacity: 1;
    transition: all 0.4s ease-in-out;
}
.view-second h2{
    background: rgba(255, 255, 255, 0.6);
    color: #000;
    box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-second p{
    opacity: 0;
    color: #333;
    transition: all 0.2s linear;
}
En el efecto la imagen se ira hacia la derecha y la descripción vendrá desde la izquierda.
.view-second:hover .mask {
    transform: translateX(0px);
}
.view- second:hover img {
    transform: translateX(500px);
    transition-delay: 0.1s;
}
.view- second:hover p{
    opacity: 1;
    transition-delay: 0.4s;
}
Aqui esta la previsualización de estos dos ejemplos.


Y eso seria todo. Pueden ver estos y otros 8 ejemplos mas directamente en la pagina del autor. En ingles.
Enlace: Original Hover Effects with CSS3

2 comentarios:

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