Efecto lateral

Hey babies! Espero que estéis bien. Yo hoy (cuando estoy escribiendo esto) sí que lo estoy, pero ayer... ay dios mío. El lunes me pusieron la segunda dosis de la vacuna (Pfizer) y ayer, después de dormir la siesta porque apenas había dormido nada por la noche, me empezó a subir la fiebre y uff... llegué a 38º, pero menos mal que se me pasó después de tomarme un paracetamol y mucho mejor 🙌. Y ahora, aunque me duele un poco el brazo del pinchazo y tengo la zona roja, no estoy nada mal 💪. Y vosotros, ¿ya os habéis vacunado?

En fin, como he visto que sólo había subido dos efectos al blog, he pensado traer otro que me parece muy bonito para usar en afiliados y es el Efecto lateral.

P R E V I EW

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

.lat {
border: 1px solid #ccc; /* borde */
background: #f8f8f8; /* color fondo */
padding: 2px;
}

.lat:hover {
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-moz-transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(90deg) translate(0px, 0px) skew(0deg, 0deg);
}

Todo lo que está en negrita, se puede modificar.

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:

<a href="LINK" title="TÍTULO"><img class="lat" src="LINK IMAGEN" /></a>
<a href="LINK" title="TÍTULO"><img class="lat" src="LINK IMAGEN" /></a>

Cambiamos lo que está señalado y listo!