Cuando yo hice mi primera página web, en los 90, el contenido se maquetaba a base de tablas HTML. Si querías una barra lateral dividías la tabla principal en dos celdas, una para el contenido principal y otra para la barra lateral, y en la celda que correspondía a la sidebar se metía otra tabla para crear diferentes módulos también a base de celdas.
Todo eso es tecnología obsoleta ahora, claro. La aparición de las hojas de estilo en cascada (CSS) supuso una revolución que, además, aceleraba el renderizado de las páginas, así que la maquetación con tablas ya sólo la utiliza quien está aprendiendo HTML y aún no sabe CSS.
Tabla de contenidos
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:
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
.imagen:hover {filter: blur(5px);}
Escala de grises
.imagen:hover {filter: grayscale(80%);}
El valor .grayscale puede tomar cualquier cantidad entre 0 y 100%, estableciendo diferentes niveles de color.
Sepia
.imagen:hover {filter: sepia(60%);}
Al igual que con el filtro anterior, puedes darle más o menos intensidad ajustando el porcentaje.
Saturación
.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
.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.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
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
.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.
.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:
.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:
.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.
Buenos dias, tengo una pregunta en la imagen que gira 180º ¿se le puede poner texto en la parte de atras?
Un cordial saludo
Guillermo Delgado
Hola Guillermo
Sí que es posible, habría que hacer uso de la propiedad backface-visibility de CSS3.
Un saludo.
Claro que si, con cuerdo contigo , de hecho yo tambien tengo problemas con eso
Que pasada este artículo, como siempre sorprendiendo con contenído original y sorprendente. Gracias
Gracias a ti, Javier
Me alegra que te haya gustado y espero que te resulte útil 🙂
Un saludo.
Hola amigo, me gustaría hacer un efecto de entrada, es decir que cuando vaya bajando aparesca la imagen, como puedo hacer esto?
Hola Juanjo
Eso no se hace con CSS sino con JS. Busca un plugin buscando por lazy load.
Un saludo.
Quizas sea un poco tarde pero para lo que necesitas o deseas hacer existe una libreria de CSS https://daneden.github.io/animate.css/ que podria ayudarte, solo es de aplicar dentro del elemento ya sea imagen, texto, div o cualquier elemento la clase con (Class=»animated bounceInLeft») por ejemplo y solo hace falta que llames la hoja de estilo de css que te da opcion a descargar en link de arriba.
Espero les sirva
¡Cierto, AnimateCSS! Y alguna vez la he utilizado, no la recordaba.
Gracias por tu aportación, Erick 🙂
LOS EMOGIS DE MI RESPUESTA NO SE MUESTRAN EN LA PANTALLA DE MI ORDENADOR LUEGO DE HABER PUBLICADO EL MISMO, QUE ES LO QUE ESTÁ SUCEDIENDO????? ME VOY A COMUNICAR CON GOOGLE INMEDIATAMENTE.
Buenas Tardes.
Gracias por tus aportes. Me gustaría saber cómo logras el efecto en tu menu, que al desplazarte hacia abajo se achica y se mantiene siempre visible
Hola Ramón
Si tu plantilla no tiene opción para hacerlo, puedes recurrir a este plugin.
Un saludo.
Gracias
Buenas. Primero que nada muy buen artículo, es de gran ayuda, y tengo una pregunta, ¿cómo ponerle a una imagen dos filtros? Por ejemplo, quiero ponerle a mi imagen que sea gris, con el grayscale, y que al pasar el mouse sobre ella baje la opacidad con el opacity y a la vez retome su color original. No sé si me he explicado bien, pero es que lo he intentado y sólo se le aplica uno de los dos. Gracias de antemano.
Hola Livier
Puedes aplicar todos los estilos que quieras, sólo hay que especificarlos en la hoja de estilos. Si uno de ellos no se aplica debe ser porque no estás escribiendo bien el CSS.
Un saludo.
Justo lo estaba escribiendo mal, al final sí se pudo. Muchas gracias.
Muchas gracias Enrique. Me ha sido muy útil.
Saludos!
Gracias a ti por tu comentario, Cristina. Me alegra oír eso 🙂
Un saludo.
Hola, quisiera saber como hacer el efecto de transparencia pero en otro color, gracias
Hola Alejandra
Para eso tienes que establecer un color de fondo para el elemento contenedor con la directiva background-color.
Un saludo.
Buenas noches enrique.
Tengo una pregunta, tengo una galeria , hace el efecto de zoom, pero queda borrosa la img, hay alguna manera de que la img quede enfocada o con buena resolucion y que al presionar pueda ampliarla?
.content-galeria img:hover{
transform: scale(1.2);
gracias de ante mano
Hola gerson
Sólo puedo suponer, pero debe ser porque el tamaño al que la has subido es insuficiente o bien la galería está utilizando una de las miniaturas generadas en lugar de la imagen a resolución completa, así que al ampliarla se pixela.
Un saludo.
HOla, y como se pone el html para la imagen? Gracias de antemano
Hola Javier
Con la etiqueta img de HTML, añadiéndole la clase CSS que le quieras definir mediante el atributo class.
Un saludo.
Gracias Enrique, muy claro tus explicación.
Consulta, el efecto de transparencia o cambio de color no me funciona la «transición suave» de salida, si la de entrada, qué será?? acá el código de como lo aplico:
#reserve_stand { padding: 0% 0 0% 0;
text-align:center;
background-color: #CCC; }
#reserve_stand :hover { background-color: #e30613;
transition:all .5s ease-in-out; }
Gracias!!!
Hola Fabián
Estás definiendo la transición sólo en el hover, así que es ahí donde la hace. Defínela también en el elemento.
Un saludo.
Buenas tardes! Excelente material.
Gracias Andrea, me alegra que te haya sido útil 🙂
oye Enrique disculpa, una pregunta de novato:
no puedo combinar estos efectos:
.imagen:hover {
transform: rotate(360deg);
transform: scale(1.3);
transition:all .5s ease-in-out;
}
nomas me sale o uno o el otro pero no ambos, como ahi que
Ya supe como :p , de todos modos Gracias por esta grandiosa entrega.
gracias por compartir y aclarar conceptos.
Gracias a ti por tu comentario, Alfredo, me alegra que te haya sido útil 🙂
Saludos amigo.. muchas gracias por compartir tus conocimientos.
Soy nuevo en esto.. apenas comienzo a entender el HTML
Si no es mucha molestia explícame como aplicar a una imagen un efecto de CSS en medio del codigo HTML de principio a fin.. osea cual es la secuencia en HTML para incluir un efecto CSS a una imagen.
Espero haberme explicado correctamente.
Gracias
Hola buenas tardes/noches, tengo una duda, estoy utilizando la animación de rotación de 180° , pero la he modificado un poco para que en lugar de funcionar con el evento «Hover» se haga el giro con el evento click , solo que tengo una duda, como puedo hacer para que al darle nuevamente clic regrese a su estado original?, espero puedas ayudarme con esto, estoy aprendiendo sobre este tipo de efectos y aún me cuesta un poco de trabajo, he intentado postear aquí el código e incluso enviar te lo por email en el apartado de contacto pero el servidor del blog me rebota la solicitud, quiero pensar que es por seguridad. espero tu respuesta y si hay necesidad buscamos la manera en la cual pueda hacerte llegar mi código, de antemano muchas gracias!
PSDT: con el evento hover la animacion se realiza sin ningún problema y también en el evento clic he logrado que se haga el primer giro, pero no logro regresar el botón a su estado original (animación inversa)
Muchas gracias por este gran aporte, me ha ayudado como no tienes idea, un abrazo.
Buen aporte pero me gustaria saber como se podria aplicar la animacion sin necesidad del hover si no que este se realize desde el momento en que la pagina carga
Interesantes efectos.
pero me gustaría aprender como llevarlo a cabo en imágenes con Divi en wordpress
Hola Enrique, muy bueno este tutorial, me ha ayudado mucho, justo estaba buscando el efecto de la transparencia y lo tenías aquí, así que me sirvió. Lo que hice fue buscar la clase de los iconos que puse en con el widget «Link con iconos» y le apliqué opacidad como predeterminado, luego le quité la opacidad con hover.
/*iconos sociales del widget link con iconos*/
.link_with_icon {
filter: opacity(.5);}
.link_with_icon:hover{
filter: opacity(1);}
Y me funcionó bien.
Por otro lado te comento, estoy trabajando el diseño en localhost por ahora, mi pregunta es si cuando lo suba al server este tendrá soporte para css3 o es cuestión del navegador? gracias.
Sergio de Argentina.
Hola Sergio
Efectivamente, el soporte depende del navegador. Hoy día ya todos los navegadores soportan HTML5 y CSS3, pero también depende de qué versión esté usando el usuario, ya que puede tener una versión antigua que no incluya ese soporte.
Un saludo.
Excelente Informacion muy util …!Agradecido
hola si me disculpan soy muy nuevo en esto pero me gustar’ia saber donde pongo cada cosa pu’es quisiera poner en la web de mi iglesia un afecto como esos, pero no se donde poner el codigo de la clase ni como llamarlo para que se visualice el efecto. Saludos y que Dios los bendiga.
Excelente artículo! CSS es un mundo gigantesco a explorar, y muchas veces, por enfocarme en php, lo he descuidado. Las animaciones las venía haciendo con Animate.css (https://daneden.github.io/animate.css/) de Daniel Eden, lo cual lo simplificaba mucho, pero a decir verdad, me sorprendió la facilidad con la que rápidamente se pueden lograr efectos tan bonitos.
Muy bien explicado, Enrique! Muchas gracias por compartir el conocimiento y la experiencia.
Saludos desde Neuquén, Argentina.
Gracias por tu comentario, Fede. Me alegra que te haya sido de utilidad 🙂
Un saludo.
Que chulo, me a servido de mucho, no sabia que se podia hacer esto solamente con css.
Saludos!
Maravilloso, éres un máquina!!! Gracias por tus aportes, sigue así.
Muy bueno! gracias por compartir el conocimiento!
Muy bueno. Tengo una duda… que debo hacer para cambiar el z index cuando paso el cursor por una imagen. Es decir, digamos que tengo dos imagenes A y B.
A esta por debajo de B.
B tapa la mitad de A.
Quiero hacer el efecto que cuando pase el cursor por A se me ponga sobre B. y pueda ver toda la imagen A.
Espero puedas ayudarme. Gracias.
Porque razón no me funciona el atributo transform: rotate(360deg)
El giro de la imagen no me sale, como lo hago. Me puedes explicar más claramente
Gracias por tu aporte. Soy nuevo en el mundo del desarrollo web, estoy practicando en un subdominio y me ha ido muy bien, tengo una pregunta, si copio una clase o código y lo pego en… ¿Dónde? ¿En avanzado clase css adicional? Trabajo con Gutenberg. Gracias.
Hola Robert
Sí, cualquier código CSS puedes ponerlo ahí.
Un saludo
hola quiero saber como respetar el punto de inicio al scalar ua imagen lo que pasa es que mi imagen se escala y la parte de arriba se vuelve inaccesible para el usuario
Muchas Gracias por el aporte, soy demasiado nuevo en esto y en realidad me gusta entender como funcionan las animaciones en lugar alguna librería. En mi caso estoy tratando de hacer una animación tipo hotmail. «Conéctate – Organízate – Aumenta tu Productividad» he visitado varios tutoriales, pero ninguno que trate el tema con letras. Si usted conociera alguno o tuviera un código de algo similar, sería tan amable de compartirlo para analizarlo? De nuevo mil gracias, saludos!!
un gran post con excelente contenido, quede interesado en la siguiente parte donde explicaras el efecto giratorio mostrando una imagen diferente detras, me gustaria implementar ese efecto en mi web pero no encuentro como hacerlo.
Buenas noches, tengo una duda, son 4 imagenes que tengo con un slider, ¿cada uno de ellos como le doy ese efecto? tengo la hoja html y la de estilo css, aparentemente están ya enlazados, por favor si me ayudarán, no sé mucho de eso. ¡Gracias!
Enhorabuena por tu trabajo, Un saludo!
Wooow sorprendente, me encantó tu tutorial!!!, fácil de desarrollar y muy lindos los efectos. Muchas gracias …
buenas tardes. como puedo agregar varios efectos aun boton en blogger? o es decir como editar el codigo para que la imagen tenga el efecto flotante, y ala vez los efectos que publica en esta pagina
no me deja apuntarme para recibir semanalmente un resumen de los tutoriales publicados. Además de poder recibir en mi email los ebooks.
por cierto muy bueno el articulo sobre los efectos en imágenes, ¡gracias!.
Se te debería decir que eres un ser humano com capacidades altas, o que eres un dios, quedó, fascinante
hola meçi
hola meçi
Excelente video, muy profesional.
He aprendido bastante.
Gracias Mr. Enrique J.R
Bendiciones
Los ejemplos están super!!!
Muchas Gracias Enrique.