¿Te gusta? Bien vamos a aplicarlo que es muy fácil!!!
1.- Nos vamos a Plantilla > Personalizar > Opciones Avanzadas > y hasta abajo encontramos la opción de "Agregar Css"
2.- Una vez estando ahí vamos a pegar los siguientes estilos en CSS3 :
3.- Aplicamos al Blog y ya podemos ver inmediatamente nuestro nuevo efecto.
Con esto debemos de tener todas las imágenes de nuestras entradas con este efecto.
1.- Nos vamos a Plantilla > Personalizar > Opciones Avanzadas > y hasta abajo encontramos la opción de "Agregar Css"
2.- Una vez estando ahí vamos a pegar los siguientes estilos en CSS3 :
.post-body img {
-webkit-filter: grayscale(100%);
border-radius: 2px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post-body img:hover {
border-radius: 100%;
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
3.- Aplicamos al Blog y ya podemos ver inmediatamente nuestro nuevo efecto.
Con esto debemos de tener todas las imágenes de nuestras entradas con este efecto.
Ahora les explicare un poco como funcionan los estilos que aplicamos para que puedan personalizarlos a su gusto:
.post-body img { /* Aqui le damos la orden de que solo se aplique en las entradas*/
-webkit-filter: grayscale(100%); /* Efecto Blanco y negro*/
border-radius: 2px; /* Pequeño borde en las imagenes*/
-webkit-transition: all 0.5s ease; /* Efecto suavizado para diferentes navegadores*/
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease; /* Fin del Efecto suavizado para diferentes navegadores*/
}
/* Efectos al pasar el cursor sobre la imagen*/
.post-body img:hover { /* Da la orden que se aplique al pasar el cursor dentro de las imagenes de las entradas*/
border-radius: 100%; /* Nos hace la imagen en circulo*/
-webkit-filter: grayscale(0%); /* Quita el efecto Blanco y Negro*/
-webkit-transform: rotate(360deg); /* Giro que da antes de transformase en circulo para varios navegadores*/
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg); /* Fin del Giro para diferentes navegadores*/
}
Hola! Como seria si en vez de blanco y negro quisiera imagenes con efectos tipo instagram? es decir con filtros como los de instagram? O por ejemplo agregarles algo de opacidad, para darles un toque mas vintage? Me podrias decir? Gracias mil de antemano
ResponderBorrarHola "Minori G." creo que el efecto que buscas es el "Sepia" entonces solo debes cambiar en el código anterior la parte donde dice "grayscale" (que es donde nos indica que el efecto sera en blanco y negro) se cambiara a "sepia" en ambos estilos (uno que muestra y otro que oculta) quedando de la siguiente manera:
Borrar.post-body img {
-webkit-filter: sepia(100%);
border-radius: 2px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post-body img:hover {
border-radius: 100%;
-webkit-filter: sepia(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
reemplaza el código anterior por el que querías.
Espero sea lo que buscas. Saludos!
Gracias!! :D
ResponderBorrara mi no me sale en blanco y negro... que puede pasar?
ResponderBorrarEs tu navegador, usa Opera o Google Chrome y te funcionara a la perfeccion
BorrarHolaaa se podría añadir este efecto pero en vez de en todas las fotos del blog sólo en las imágenes de una entrada en concreto? mil gracias
ResponderBorrarHola no me funciona! sirve para plantilla "VISTA DINAMICA"?
ResponderBorrar