Efecto Blur

Hey babies! ¿Habéis tenido vacaciones de Semana Santa? ¿Qué tal volver a la rutina? Yo debo decir que me está costando un poquito, pero bueno... supongo que se vuelve un poco más ameno gracias al buen tiempo y a que ya empieza a hacer calorcito.

Hoy, como veis en el título, traigo otro efecto, para que se pueda usar en afiliados o en cualquier sitio donde os interese.

Preview

1. Vamos a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y encima pegamos el siguiente código:

.blur {
width:50px;
padding:0px;
border-radius: 0px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-filter: saturate(100%) ;
}

.blur:hover {
padding:0px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-filter: saturate(0%) ;
-webkit-filter: blur(2px); color:#fff;
}

Ya sabéis, lo que está en negrita se puede cambiar, podéis ir jugando añadiendo y quitando cosas para que quede a vuestro gusto.

2. Ahora lo único que hay que hacer es añadir un nuevo gadget HTML/Javascript y añadir el siguiente código tantas veces como nos interese, cambiando lo que está en negrita:

<a href="LINK DEL BLOG" title="TÍTULO DEL BLOG" onmouseover="ddrivetip('havingthemes')" 
onmouseout="hideddrivetip()"><img src="LINK DE LA IMAGEN" width="ANCHOIMAGENpx" 
height="ALTURAIMAGENpx" class="blur" /></a>