TUTO Efecto blanco y negro al poner el cursor sobre la imágen


Echa sobre Jehová tu carga, y Él te sustentará;
no dejará para siempre caído al justo.
Salmos 55:22


Holis mis panditas.. como han estado en estos días?
Espero que super bien por la gracia de Dios!!

Hoy les quiero compartir un efecto muy lindo para las imágenes en tus posts.
Lo que hace este efecto es que al pasar el cursor sobre la imágen que
contenga dicho efecto está cambiará a blanco y negro.

Este efecto no se visualizará en todas las imágenes de tu blog, solo se mostrará en la imágen específica a la que tu le agregues dicho efecto. Lo cual viene muy bien para decorar nuestro sidebar o algunas imágenes de nuestros posts. Por ejemplo, este efecto viene muy bien para la imagen que ponemos en gadget de Bienvenida (el primer gadget en el sidebar del blog).
Esto es solo un ejemplo para darte una idea.

Bueno mis panditas chulas, paremos este mini conversao
y comencemos con este maravilloso tuto.. tutorial!!
...Les parece? ...Pués, let's do it..

Como hoy no estoy por mucho explicar (fin de año pues :) ...resumiré todo el proceso.
Si ya has visto los tutos anteriores a este, sabrás entonces cómo hacerlo porque en ellos
les explico detalladamente el proceso, por tanto me imagino, que ya tendrán una idea del paso a paso. En caso de no ser así, déjame tu duda aquí en los comentarios y con gusto te explico. Tu solo grita bien fuerte y vendré corriendo ayudarte a la brevedad posible, vale ;)

Bueno, comencemos: Pega el siguiente CSS en tu plantilla

.bw {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.bw:hover {-webkit-filter: grayscale(100%);}.pic {float: center;margin: 20px;overflow: hidden;}
Tutos Koko Kawaii


Ahora donde quieras que se vea el efecto,
debes agregar el siguiente código:

<div class="bw pic"><img src="URL DE TU IMÁGEN" alt="sea"></div>

Tutos Koko Kawaii

Aquí te dejo un ejemplo de cómo se visualiza mediante la siguiente imagen.
Tan solo pasa el mouse sobre la misma..

sea

La línea de código anterior no define la posición o alineación de la imagen, por tanto si quieres que la imagen se muestre centrada como está que no está alineada ni a la derecha ni a la izquierda, entonces solo debes agregar el código anterior (el código que define que se muestre el efecto), dentro de la
etiqueta center como te muestro en el ejemplo siguiente:

<center>AQUÍ EL CÓDIGO ANTERIOR</center>

Y si quieres copiar el código ya listo, dentro de la etiqueta center para centrar la imagen, o ya sea para poner la imagen a la derecha o a la izquierda según sea tu necesidad, entonces solo copia el tercer código que te deje en la nota nimbus mediante los dos enlaces anteriores.
(La imagen que dice: Clic aqui para copiar el código)
O bien, haz clic aquí para ir allí nuevamente :)


RECUERDA: Todos los codigo de un tutorial "lo dejamos siempre" en una sola nota. Y esa nota es la correspondiente a dicho tutorial, la cual llevara por titulo el mismo nombre del tutorial en el blog, para una mejor referencia y más facilidad de localizar.

Por tanto, todos los códigos de este tutorial están en una sola nota, y dicho enlace es el que hemos compartidos 3 veces anteriormente (dos con imágenes y uno en texto). Que te quiero decir con esto, que no cierres la nota hasta terminar con el tutorial. No te preocupes que el enlace de la nota con los códigos abrirá en una ventana nueva de tu navegador para que tengas el tutorial abierto a la par de la nota con los códigos. Y en las notas te explicamos un poco para que te puedas guiar bien sin complicacion. Cualquier cosa, solo pregunta aquí en los comentarios.

Espero te haya gustado el tuto de hoy, hasta una próxima entrada :)
Bendiciones!!


Koko Kawaii
Conoce aquí a Koko Kawaii



Confía En Cristo • Tu Jardín De Fe
Vanessa Martinez © 2012-2018

No hay comentarios.:

Bendicenos con un comentario


๑ ALGUNOS PUNTOS A TENER EN CUENTA ANTES DE COMENTAR๑
♣ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~♣

❥ Un corazón agradecido siempre sabe decir gracias..
❥ Y la forma más fácil de decirlo es a través de tus comentarios..
❥ Al hacerlo se cordial, respetuoso y de bendición a los demás..
❥ Deja la URL de tu blog para que podamos visitarte..
❥ Sin embargo, los enlaces inapropiados serán bloqueados
❥ Para poder agregar un enlace activo en los comentarios VER COMO AQUÍ
❥ Para insertar una imagen solo utiliza [img]URL de la imagen[/img]
❥ Para insertar un vídeo solo utiliza [video]URL del video[/video]
❥ Para cambiar color de texto utiliza [color="red"]Aquí tu texto[/color]
❥ Para crear marquesina utiliza [ma]Aquí tu texto[/ma]
❥ Este blog cuenta con varios autores y un administrador
❥ Publicaciones de nuestra autoría llevarán nuestro nombre al final
❥ Con la fuerza de un oso y la ternura de un gato así es #miositopada
❥ NO COPIA, es creativo.. y si toma algo siempre da los créditos :)
❥ POR TANTO, DILE NO AL SPAM, BECAUSE HERE, SPAM BLOCKED
❥ Los comentarios en este blog pasan por un sistema de moderación
❥ Por tanto, NO se aprobarán los comentarios:
• con textos árabes
• con propagandas (spam)
• con mensajes sin sentido al tema publicado
• con promoción a la violencia o discriminación
• con enlaces a páginas inapropiadas o con violencia
• con ofensas a personas, razas, animales, publicaciones o marcas
❤ ¿Algún problema con eso? ... Somos Team RD ... #algunproblema
❤ El respeto ajeno es la paz.. Pero confrontar lo malo y el pecado es una necesidad :)
❤ Simplemente, si te gusta lo que hacemos, entonces revela tu corazón sin temor
❤ Comparte + Síguenos + Comenta = A dar por gracia lo que recibes
❤ Observa + Procesa + Inspírate + Crea = OPIC•NOW | #opicnow
❤ © NO COPY ® BE•ORIGINAL

ʕ•ᴥ•ʔ COMUNICADO IMPORTANTE ʕ•ᴥ•ʔ
Las publicaciones de terceros compartida en este blog serán acreditadas como corresponde, a no ser, que estén sin créditos donde la conseguimos y desconozca los mismos. Por favor, avísanos con respeto mediante un comentario si algo en este blog necesita créditos ♥
•°Vanessa Martinez © 2012-2019°•

✿ Y RECUERDA, TUS COMENTARIOS ALIMENTAN MI BLOG Y SON CARICIAS DE DIOS A MI ALMA ✿
Cuando comentas con amor y respeto ♥ Nos estamos leyendo mis linduras, mis corazones de fe♥

Gracias por tu visita
¡Hola Corazón de Fe... Anímate a Comentar!
Pues me gustaría saber tu opinión sobre este tema. Dejanos saber si el mismo ha sido de utilidad o de bendición para ti, asi como tambien, que otros temas te gustaria que tratemos.
SOLO RECUERDA: No se permiten mensajes ofensivos o que falten al respeto, tampoco spam.. Puedes compartir la URL de tu blog siempre y cuando opines sobre la entrada que estas comentando y que tu enlace no sea spam ni inadecuado. Dichos comentarios serán marcado como spam y eliminados. Si un niño de 10 años no puede leer o ver lo que compartes entonces no es bienvenido aquí.
¡Si me sigues.. te sigo devuelta!
Excepto aquellos blogs con contenido inadecuado.

♥ A la mayor brevedad respondemos los comentarios

Copyright © 2012-2018 CONFÍA EN CRISTO || Theme Base ๑ GGEORGELYS || Deco-Style and Effects ๑ KOKO KAWAII