Efectos Imágenes Posts | Tutorial Blogger

Feliz Jueves

Vengo con una nueva entrada de esta sección, un tuturial para enchular nuestras entradas y esta vez se enfocará en agregarle algún efecto a nuestras imágenes para hacer más dinámicos nuestros posts o por lo menos hacer que tengan algo diferente y hasta divertido. En total son ocho efectos que van desde los más comunes como el blanco & negro, el sepia y el blur hasta unos con movimiento de rotación o con bordes de colores. 

Espero les guste la entrada y lo más importante es que les sea de utilidad.

1. Vamos a Tema ↣  Editar HTML.

2. Dentro damos CTRL + F y nos sale un recuadro de búsqueda.

3. Dentro de ese recuadro colocamos ]></b:skin> y enter.

4. Antes de ]></b:skin> ponemos alguno de los códigos que les comparto abajo, dependiendo de cuál desean para sus imágenes. 

ACLARACIÓN: El efecto se apreciará solamente cuando se pasa el cursor por encima de la imagen, del resto las imagenes permanecerán normales. 

NOTA: Estos efecto solo se aplicaran a las imágenes que tengan en sus entradas, así que no se preocupen porque ni las imagenes de los gadgets, comentarios, cabecera y demás se verán modificadas.

.post img { -webkit-transition: all 0.8s linear;-moz-transition: all 0.8s linear;transition: all 0.8s linear }

.post img:hover { -webkit-filter: grayscale(100%);z-index: -99px; }

.post img { -webkit-transition: all .7s linear; -moz-transition: all .7s linear; transition: all .7s linear }

.post img:hover { -webkit-filter: blur(1px);z-index: -99px; }

.post img { filter: hue-rotate(360deg); -webkit-filter: hue-rotate(360deg); -moz-filter: hue-rotate(360deg); -webkit-filter;(1); -webkit-transition: all 0.7s linear; -moz-transition: all 0.7s linear;
transition: all 0.7s linear; }

.post img:hover { filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); -moz-filter: hue-rotate(0deg); -webkit-filter;(0); }

Nota: En la imagen no se logra apreciar bien pero el efecto es de arcoiris bastante chulo.

.post img { border:none; padding:0px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

.post img:hover { border-radius: 40px; opacity: 1; }

.post img { -webkit-transition: all .7s linear; -moz-transition: all .7s linear; transition: all .7s linear }

.post img:hover { -webkit-filter: invert(100%);z-index: -99px; }

Nota: La transición que hace de unos colores a otros es en gris, en mi opinión no es del todo estético. 

.post img { -webkit-transition: all .7s linear; -moz-transition: all .7s linear; transition: all .7s linear }

.post img:hover { -webkit-filter: sepia(100%);z-index: -99px; }

.post img { background:transparent: box-shadow:inset 0 0px 0px #F35AA9; -webkit-transition: all
0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; padding:5px; border:1px solid #D74691; }

.post img:hover { -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out; box-shadow:inset 600px 0px 1px #C34472; }

Nota: El borde se va llenando poco a poco, el efecto es bastante chulo. El color se puede modificar, solo se cambian los códigos de colores que están en morado/magenta. 

 

.post img { border: 2px #C8C6C6 solid;border-radius:50px; }

.post img:hover { -webkit-filter: grayscale(0.7); -webkit-transform: rotateY(-180deg);-moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }

Nota: Hace una rotación completa la imagen a la par que pone un efecto opaco. Pueden cambiar el color del borde solo modificando el código que está en morado/magenta.