Mark
#1

 Hola de nuevo ^^ esta vez les comparto un efecto para imágenes, le puse de nombre Fotos recogidas por la forma en la que se mantienen las imagenes hasta cuando se aplica el hover y es entonces que vuelven a la precisión que deberían de tener para que se puedan ver todas, además de explicarles como tener el efecto a pedido de un usuario explicare lo que significan unas propiedades ya que el pensaba que yo repetía innecesariamente algunas pero no es así, mas abajo explico lo que significan, ahora proseguiremos con el efecto

copia y pega el siguiente código css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente código

See the Pen Fotos recogidas, efecto con CSS3 - ZKreations by eltorga (@eltorga) on CodePen.

Pega el siguiente código HTML en donde quieras el efecto:

See the Pen Fotos recogidas, efecto con CSS3 - ZKreations by eltorga (@eltorga) on CodePen.

lo que esta en rojo lo reemplazan por los links de sus imagenes y las "#" por el link que deseen para cada imagen

Explicacion sobre propiedaes en CSS3

Ahora explicare algo que contiene este código, esta parte es CSS3 y por desgracia este lenguaje aun se interpreta diferente para distintos navegadores.

 El efecto en CSS3 que usamos para esta ocasión es transition y para que los navegadores lo interpreten bien se debe anteponer para cuales va dirigido

-moz = Mozilla Firefox

-ms =  Internet Explorer 8 y 9

 -webkit = Safari y Chrome

-o = Opera


Si nuestra pagina web fuera abierta utilizando Firefox, el navegador ignoraria todo lo que esta escrito menos esta parte

-moz-transition: all 400ms ease;

y es entonces cuando se aplica el efecto que deseamos, lo mismo pasa si nuestra web fuera abierta con Chrome o Safari, esos navegadores ignorarian todas las propiedades a excepción de esta

 -webkit-transition: all 400ms ease;

Entonces si quieres que un efecto en CSS3 sea visto por la mayoria de los navegadores que sea posibles tienes que escribir la propiedad para cada navegador

Volviendo al tema de el efecto de Fotos recogidas, al terminar de agregar todo lo que esta nombrado arriba nos quedaría asi:


eso es todo, recuerda que si tienes alguna duda o necesitas ayuda para algo solo dejalo en un comentario =)

image quote pre code
Compartir: