5 efectos hover con jQuery para tus imágenes en Blogger

En este lance me gustaría informar de 5 efectos hover, espectaculares, para tus imágenes usando jQuery. Los Bloggers siempre están usando imágenes y fotografías en sus blogs, y desearía compartir dichos efectos para que los insertéis en vuestros blogs, no cabe duda de que si lo agregáis en vuestro estimado blog, le daréis estilo e impacto a tus imágenes. Este plug-in lo he visualizado en cube3x.com y me he apresurado ha crear está entrada para compartir tal hallazgo. A continuación verás la descripción de cada uno de los efectos que puedes aplicar.
Los cinco efectos serán los siguientes:

1. Efecto 1 - Popout, este efecto al posicionar el cursor por encima de la imagen hará el efecto cómo si sobresaliera.
2. Efecto 2 - Slice Down, la imagen tendrá un recubrimiento oscuro y el efecto slice revelará la imagen claramente.
3. Efecto 3 - Box Random, La imagen tiene una aspecto de transparencia y al hacer hover se muestra la imagen nítida con recuadros al hacer hover.
4. Efecto 4 - FoldLeft, en este efecto podemos observar que tiene una tonalidad opaca y al hacer hover se muestra claramente la imagen con un efecto acordeón hacía la izquierda.
5. Efecto 5 - Rain Grow Reverse, en este efecto al hacer hover se muestra la imagen de esquina a esquina.

✔Demostración del ejemplo del efecto número 1

✔Demostración del ejemplo del efecto número 2

✔Demostración del ejemplo del efecto número 3

✔Demostración del ejemplo del efecto número 4

✔Demostración del ejemplo del efecto número 5

• Ahora vayamos a implantar estos estupendos efectos en Blogger, ahora vienen los códigos para poder añadir dichos efectos en tus imágenes:

Para añadir el script jQuery es antes de </head>:

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script src='http://cube3x.com/demo/adipoli-jquery-image-hover-plugin/js/jquery.adipoli.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
jQuery(function($pice){
$pice('.effect1').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
$pice('.effect2').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
$pice('.effect3').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRandom'
});
$pice('.effect4').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'
});
$pice('.effect5').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});
});
/*]]>*/
</script>

Ahora vayamos a la parte CSS y es antes de ]]></b:skin>:

.adipoli-wrapper{margin:auto;position:relative;display: inline-block;}
.adipoli-wrapper>img{position: absolute;z-index: 1;}
.adipoli-before{position: absolute;z-index: 5;}
.adipoli-after{position: absolute;z-index: 10;}
.adipoli-slice {display:block;position:absolute;z-index:15;height:100%;}
.adipoli-box{display:block;position:absolute;z-index:15;}

• Una vez hecho estos pasos guarda la plantilla de Blogger.

• Ahora añadiremos los efectos en las imágenes con las clases o class effect1 y así sucesivamente, dependiendo del efecto elegido, elegir el efecto y la numeración del efecto correspondiente, siempre con la llamada effect y luego el número, effect2, effect3, effect4, effect5.

HTML de imagen dónde quieres que se visualice el efecto:

1. <img class="effect1" src="Aquí_La_URL_De_La_Imagen" />
2. <img class="effect2" src="Aquí_La_URL_De_La_Imagen" />
3. <img class="effect3" src="Aquí_La_URL_De_La_Imagen" />
4. <img class="effect4" src="Aquí_La_URL_De_La_Imagen" />
5. <img class="effect5" src="Aquí_La_URL_De_La_Imagen" />