Crear efectos hover llamativos con CSS3 (Parte I)

Crear efectos hover llamativos con CSS3 (Parte I)

Hoy en día podemos apreciar en la web una serie de efectos muy llamativos realizados con CSS3, y uno de ellos es el efecto hover sobre imágenes en el cual, al pasar el cursor sobre una miniatura podremos superponer sobre ella algún tipo de información.

En este tutorial les enseñaré a crear algunos efectos bas谩ndome en un artículo creado por Alessio Atzeni en el sitio web tympanus.net, el cual está en inglés y decidí traducirlo y aplicarle ciertas modificaciones para aquéllos que se les hace un poco difícil leer en inglés. Si deseas acceder al artículo original haz clic aquí.

Deben tener en cuenta que CSS3 al ser experimental no funcionará en ciertos navegadores. Ahora, a lo que nos interesa, los códigos fuente que nos ayudaran a crear nuestros efectos hover.

El HTML

El código HTML que necesitaremos para conseguir darle forma a nuestros efectos con CSS3 es muy sencillo. Se trata de un contenedor que envolverá cada una de las imágenes, el título de la misma, una pequeña descripción y un enlace al que ustedes le podrán dar la utilidad que deseen. Y por supuesto un contenedor con una máscara que se encargará de dar el efecto hover.

<div class="view">  
    <img src="img/pagani-huayra.jpg">  
    <div class="mask">  
        <h2>Título</h2>  
        <p>Texto</p>  
        <a href="#" class="info">Leer Más</a>  
    </div>  
</div>

El CSS

Ahora es el momento del poderoso CSS3. En esta parte del tutorial solo vamos a definir las reglas generales para los diversos ejemplos que vamos a crear. Luego, en cada uno de los ejemplos se crearan las nuevas reglas que serán necesarias para lograr el efecto sobre las imágenes.

Debido a que se utilizan reglas CSS3 que aún no son estandar, es necesario en dichas reglas escribir los prefijos para los diversos navegadores, en este tutorial se omitirán para no hacerlo tan largo, pero estarán presentes en los archivos de descarga.

.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
}
.view .mask, .view .conent {
    width: 300px;
    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: hsla(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;
}

Luego de haber creado los estilos generales, vamos a elaborar los estilos necesarios para cada uno de los efectos hover que aplicaremos a las imágenes. En total elaboraremos 5 efectos diferentes en este tutorial y 5 más en el siguiente.

EJEMPLO 1

Crear efectos hover llamativos con CSS3 Parte I - Ejemplo 1

Creamos las reglas CSS3 que se encargaran de la magia. Estos son los estilos iniciales que tendrán los elementos.

.view img {
    transition: all 0.2s linear;
}
.view .mask {
    opacity: 0;
    background-color: hsla(34,93%,45%,0.7); /* Color naranja con 0.7 de opacidad */ 
    transition: all 0.4s ease-in-out;
}
.view h2 {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 0.2s ease-in-out;
}
.view p { 
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.2s linear;
}
.view a.info {
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

Ahora configuramos las reglas que se activaran en el evento hover, es decir, al posicionar el puntero del ratón sobre las imágenes.

.view:hover img { 
    transform: scale(1.1);
} 
.view:hover .mask { 
    opacity: 1;
}
.viwe:hover h2,
.view:hover p,
.view:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view:hover p {
    transition-delay: 0.1s;
}
.view:hover a.info {
    transition-delay: 0.2s;
}

EJEMPLO 2

Crear efectos hover llamativos con CSS3 Parte I - Ejemplo 2

En este segundo ejemplo vamos a modificar el HTML original para conseguir el efecto hover deseado.

<div class="view">  
    <img src="img/lamborghini-aventador.jpg">  
    <div class="mask"></div>
    <div class="content">
        <h2>Título</h2>  
        <p>Texto</p>  
        <a href="#" class="info">Leer Más</a>    
    </div>
</div>

Aquí la clase mask tendrá atributos diferentes para lograr el efecto deseado. Utilizamos la propiedad transform (trasladar y girar).

.view img {
    transition: all 0.2s ease-in;
}
.view .mask {
    opacity: 0;
    background-color: hsla(213,33%,59%,0.7);
    transition: all 0.2s ease-in-out;
    transform: translate(265px, 145px) rotate(45deg);
}
.view h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: translate(200px, -200px);
    transition: all 0.2s ease-in-out;
}
.view p { 
    transform: translate(-200px, 200px);
    transition: all 0.2s ease-in-out;
}
.view a.info {
    transform: translate(0px, 100px);
    transition: all 0.2s 0.1s ease-in-out;
}

Como pueden apreciar, estamos aprovechando las nuevas propiedades transform y transition de CSS3 que se encargan que el efecto a aplicar sea llamativo. A continuación colocamos el resto de las reglas CSS3 para este ejemplo.

.view:hover .mask { 
    opacity: 1;
    transform: translate(-80px, -125px) rotate(45deg);
}
.view:hover h2 { 
    transform: translate(0px,0px);
    transition-delay: 0.3s;
}
.view:hover p {
    transform: translate(0px,0px); 
    transition-delay: 0.4s;
}
.view:hover a.info {
    transform: translate(0px,0px); 
    transition-delay: 0.5s;
}

EJEMPLO 3

Crear efectos hover llamativos con CSS3 Parte I - Ejemplo 3

En este ejemplo seguiremos usando las propiedades translate y rotate de CSS3. El HTML necesario es el mismo del ejemplo anterior.

.view img {
    transition: all 0.2s ease-in;
}
.view .mask {
    opacity: 0;
    background-color: hsla(0,0%,0%,0.6);
    transition: all 0.2s 0.4s ease-in-out;
    transform: translate(460px, -100px) rotate(180deg);
}
. view h2 {
    transform: translateY(-100px);
    transition: all 0.2s ease-in-out;
}
.view p { 
    transform: translateX(300px) rotate(90deg);
    transition: all 0.2s ease-in-out;
}
.view a.info {
    transform: translateY(-200px);
    transition: all 0.2s 0.1s ease-in-out;
}

Ahora definimos los estilos que se aplicaran en el evento hover, es decir, los que haran la magia del efecto.

.view:hover .mask { 
    opacity: 1;
    transform: translate(0px, 0px);
    transition-delay: 0s;
}
.view:hover h2 { 
    transform: translateY(0px); 
    transition-delay: 0.5s;
}
.view:hover p {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0.4s;
}
.view:hover a.info {
    transform: translateY(0px);
    transition-delay: 0.3s;
}

EJEMPLO 4

Crear efectos hover llamativos con CSS3 Parte I - Ejemplo 4

Para este ejemplo debemos dejar nuestro HTML de esta manera:

<div class="view">  
    <img src="img/volkswagen-beetle.jpg">  
    <div class="mask">  
        <h2>Título</h2>  
        <p>Texto</p>  
        <a href="#" class="info">Leer Más</a>  
    </div>  
</div>

Ahora en este ejemplo vamos a aplicar un efecto de zoom tanto en las imágenes como en los contenidos al hacer hover sobre ellos gracias a la propiedad scale perteneciente al majestuoso CSS3.

.view img {
    transition: all 0.4s ease-in-out 0.2s;
    opacity: 1;
}
.view .mask {
    opacity: 0;
    background-color: hsla(0,0%,0%,0.8);
    transition: all 0.4s ease-in;
    transform: scale(0) rotate(-180deg);
}
.view h2 {
    opacity: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transition: all 0.5s ease-in-out;
}
.view p {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.view a.info {
    opacity: 0;
    transition:all 0.5s ease-in-out;
}

Ahora las sencillas instrucciones que crearan el efecto.

.view:hover .mask { 
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.2s;
}
.view:hover img    { 
    transform: scale(0); 
    opacity: 0;
    transition-delay: 0s;
}  
.view:hover h2,
.view:hover p,
.view:hover a.info {
    opacity: 1;
    transition-delay: 0.5s;
}

EJEMPLO 5

Crear efectos hover llamativos con CSS3 Parte I - Ejemplo 5

En este último ejemplo publicado en el presente tutorial crearemos un sencillo efecto de deslizamiento hacia los lados tanto de la imagen como de los contenidos que se mostraran en el hover. El HTML necesario es idéntico al ejemplo anterior.

.view img {
    transition: all 0.3s ease-in-out; 
}
.view .mask {
    opacity: 1;
    background-color: hsla(5,23%,46%,0.3);
    transform: translateX(-300px);
    transition: all 0.4s ease-in;
    border-radius: 0;
}
.view h2 {
    background: hsla(0,0%,100%,0.5);
    color: hsl(0,0%,0%);
    box-shadow: 0px 1px 3px hsla(3,9%,59%,0.5);
}
.view p {
    opacity: 0;
    color: #333;
    transition: all 0.2s linear;
}

El efecto hover que aplicaremos deslizará la imagen hacia la derecha y el contenido aparecerá desde la izquierda, dando la impresión que el contenido empuja la imagen hacia afuera del contenedor.

.view:hover .mask { 
    transform: translateX(0px);
}
.view:hover img { 
    transform: translateX(300px);
    transition-delay: 0.1s;
}  
.view:hover p {
    opacity: 1;
    transition-delay: 0.4s;
}

CONCLUSIÓN

Como han podido notar, CSS3 tiene un potencial muy grande para crear efectos muy llamativos como los de hover que hemos creado en este tutorial, los cuales antes solo eran posibles utilizando JavaScript.

Espero pronto CSS3 se convierta en estándar y sea plenamente compatible con la mayoría de navegadores y podamos olvidarnos de los prefijos en nuestras reglas. En el siguiente tutorial crearemos los 5 efectos de hover restantes. Cualquier inconveniente, no dudes escribirme mediante el formulario de contacto.

Comentarios

Deja tu comentario

http://