Aclarar las fotos cuando el ratón pasa por encima en blogger

Aclarar las fotos cuando el ratón pasa por encima en blogger

Por desgracia en blogger no hay tantos widgets como en wordpress y si queremos de vez en cuando añadir un elemento un poco mas dinámico a nuestro blog debemos usar el código para modificar cosas, por ejemplo este truco es para cuándo quieres que una imagen al pasar el ratón por encima se atenúe y crear así un efecto de movimiento.

Vamos a hacerlo primero para una sola foto a la que aplicaremos el efecto de aclarado a pasar el ratón por encima.

Primero en la entrada colocamos la imagen y debemos acordarnos del nombre con el cual la hemos subido por ejemplo yo lo he hecho con una foto de mi perro y la he titulado michi.jpg como se llama Mortadelo en casa lo llamamos michi.

Una vez subida la foto pasamos a la vista html para encontrar en el código la imagen… en este caso es muy fácil pero si es un post amplio podéis usar control+f y abajo a la izquierda se abre una ventana de búsqueda poned el nombre de la foto y ya la tenemos localizada.

Una vez la tenemos localizada debemos añadir un poco de código javascript para que acceda a las propiedades del objeto imagen:

La propiedad opacity va desde 1 que es opaco hasta 0 si queremos un valor intermedio el 0.5 está bien, la transparencia la da el filtro alpha en este caso va desde 100 que no es transparente a 0 transparente en este caso he puesto 50, ojo hacer una prueba primero y antes de manejar el código de la plantilla os aconsejo que leáis este consejo: Cambiar tu blog sin sustos

onmouseout="this.style.opacity='1';this.filters.alpha.opacity='100';" onmouseover="this.style.opacity='0.5';this.filters.alpha.opacity='50';"

El resultado es este para aclarar las fotos que te interese aclarar, es importante saber que con este método no vas a atenuar todas las del blog pero si las que mas te interesen.

Si queréis ver el experimento en vivo y ver como se atenúa la imagen en el sandbox de los experimentos podéis echar un ojo.

Y que pasa si quieres cambiarlo en todo el blog? también se puede pero en la plantilla, eso significa que aplicarás este efecto de rollover a todas las imágenes del blog sin excepción: cabeceras, separadores, anuncios.. y no sé si será en realidad muy práctico.

Vamos a plantilla diseño y elegimos añadir css

Ahora sólo debemos añadir este poco de código:

.post-body img:hover {
opacity:0.4;
border:2px;
}

Así lograrás que todas las imágenes del blog se cambien de una vez.