10 efectos en imágenes con CSS

Antes que nada: transiciones suaves

Batallitas aparte, CSS sigue avanzando. Supongo que la próxima revolución vendrá de la mano de CSS Grid (si eres desarrollador web y aún no has empezado con CSS Grid se te va a hacer tarde) pero de momento, la última, vino de la mano de CSS3. Esta versión trajo modos de tratar el contenido que hasta entonces no era posible si no era mediante el uso JavaScript. Y los efectos. Efectos espectaculares. Como los efectos con CSS3 para las imágenes que te voy a enseñar hoy.

Para verlos en acción bastará con que pases el ratón por encima de la imagen (lo que se llama hover). Daré el código CSS necesario para que tú mismo puedas implementarlos en tu web (o en las webs de tus clientes), pero para no hacer esto kilométrico sólo daré el código del efecto.

A la hora de aplicarlo, para que el cambio no sea brusco, conviene hacer uso de las transiciones. Si no entiendes bien a lo que me refiero, puedes pasar el ratón por encima de estas dos áreas:

Aprecias la diferencia, ¿verdad? La velocidad de transición también se la debemos a CSS3, y se obtiene mediante la propiedad transition. Para no ser repetitivo voy a usar en todas las imágenes la transición:

1	transition:all .5s ease-in-out;

sin especificarlo en el código, a no ser que para apreciar bien el efecto necesite aplicar alguna otra, en cuyo caso lo especificaré. Definiré la clase aplicada a la imagen como .imagen.

Aplicar filtros a las imágenes con CSS

La primera (segunda en realidad, después de las transiciones) propiedad que quiero mostrarte es filter, que nos permite aplicar diferentes filtros a las imágenes sin necesidad de pasar por Instagram 

Ahí van algunos (hay más) con su correspondiente código, ve pasando el ratón por encima para apreciarlos:

Desenfoque

1	.imagen:hover {filter: blur(5px);}

Escala de grises

1	.imagen:hover {filter: grayscale(80%);}

El valor .grayscale puede tomar cualquier cantidad entre 0 y 100%, estableciendo diferentes niveles de color.

Sepia

1	.imagen:hover {filter: sepia(60%);}

Al igual que con el filtro anterior, puedes darle más o menos intensidad ajustando el porcentaje.

Saturación

1	.imagen:hover {filter: saturate(180%);}

Esta vez es diferente: 100% es la saturación original de la imagen. Los valores por encima conseguirán una imagen sobresaturada, y por debajo de ese valor la imagen muestra menos saturación de la habitual.

Transparencia

1	.imagen:hover {filter: opacity(.5);}

Aunque he puesto transparencia es en realidad al revés, ya que lo que se especifica es la opacidad: 1 es totalmente opaco (valor por defecto) y 0 es totalmente transparente.

Transformaciones y animaciones

Hay muchos más filtros, pero vamos a pasar a algo con más… animación. 

CSS3 provee también de una serie de efectos que imprimen movimiento a las imágenes, transformándolas y animándolas. Combinándolas además se pueden conseguir efectos espectaculares. Algunos de ellos implican usar un contenedor, un div que contiene la imagen, y que definiré con la clase .contenedor.

Zoom y cambios de tamaño

1 2	.contenedor:hover .imagen {-webkit-transform:scale(1.3);transform:scale(1.3);} .contenedor {overflow:hidden;}

En realidad, como ves, es escalar la imagen a un tamaño mayor (multiplicarlo por 1.3 en este ejemplo) pero estableciendo un contenedor que oculta todo lo que sale del tamaño original (gracias al overflow:hidden). Con un escalado de este tipo sin contenedor conseguimos una imagen que se agranda:

y, si usamos un valor para scale menor que 1, una imagen que se contrae:

Giros y rotaciones

Este es bastante llamativo:

Como ves, he utilizado esta vez una imagen cuadrada. Es importante cuando este tipo de efecto se dispara con un hover, ya que si pones el puntero en el borde y al girar la imagen sale de debajo del puntero, volverá a su sitio, encontrando ahí de nuevo al puntero y… en fin, entra en un bucle muy poco agradable visualmente.

1	.imagen:hover {-webkit-transform: rotate(360deg);transform: rotate(360deg);}

Ya imaginarás que puedes utilizar cualquier valor que quieras en grados para rotate, entre 0 e infinito. Valores por encima de 360 darán como resultado más de una vuelta. Pero no te pases, si pones por ejemplo 3600 la imagen dará diez vueltas completas cada vez que le pongan el ratón encima. ¡Qué mareo!

Y, para terminar con los giros, a ver qué te parece éste:

1 2 3 4 5

.imagen:hover { -webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform: rotateY(180deg); transform-style: preserve-3d;}

Incluso si le añadimos un div contenedor, un background y un poco de “magia” CSS, podemos hacer que “detrás” de la imagen original se muestre otra diferente, o incluso un texto. Aunque esto es algo más complicado y lo dejo para la continuación de esta entrada.

Combinando efectos

La cosa puede ir tan lejos como quieras, evidentemente. Puedes combinar varios efectos como el giro, el box-shadow (para establecer sombras o resplandores) y el border-radius para conseguir una cosa tan estrambótica como ésta:

1 2 3 4 5 6 7 8

.imagen:hover{ border-radius:50%; -webkit-border-radius:50%; box-shadow: 0px 0px 15px 15px #ec731e; -webkit-box-shadow: 0px 0px 15px 15px #ec731e; transform: rotate(360deg); -webkit-transform: rotate(360deg); }

El valor de border-radius puede estar dado en números enteros (píxeles) o en porcentaje sobre el tamaño de la imagen. Un valor de 50% en una imagen cuadrada dará como resultado una imagen completamente redonda.

Sobre los efectos en una web

Sé que a veces uno quiere que su web sea “la más chula del barrio”, pero ten siempre presente cuál es el objetivo primordial de tu web, y no lo sacrifiques ni un ápice ante el diseño, y mucho menos ante un efecto visual.

Ten en cuenta que en un ecommerce el objetivo número uno es vender, y en una web corporativa o una de marca personal es generar contactos comerciales. Así que eso es lo primero y toda la web debe estar pensada (en conjunto y también cada uno de los elementos de forma individual) para servir a ese objetivo.

Después de eso está la usabilidad, o más bien como parte de eso, ya que una web con usabilidad pobre no va a vender ni a convertir. Sólo una vez que ya se han tenido en cuenta esos aspectos queda lugar para florituras de diseño y efectos llamativos, si estamos seguros que no van a interferir.

Ten eso en cuenta a la hora de implementar estos efectos de imágenes.

PUBLICADO EN: https://www.enriquejros.com/efectos-imagenes-css/