Las imágenes que se publican en los blogs están estáticas, no tienen ningún tipo de dinamismo. Con este tutorial sencillo y breve, las imágenes tendrán un efecto de giro al pasar el cursor del mouse por ellas. Así ganamos ese dinamismo perdido o faltante.
El resultado final será así:
El resultado final será así:
- Ubicación: plantilla y gadget java.
- Proceso:
1.) EN LA PLANTILLA: pegar los siguientes estilos antes de ]]></b:skin>
.imagerotate img {
-moz-border-radius:5px;
-moz-transition: -moz-transform 1s ease 0s;
background:#B292A9 !important;
border: 1px solid #ffffff !important;
border-radius: 5px 5px 5px 5px;
height: 150px; margin: 5px;
padding: 0px;
position: relative;
width: 220px;
}
.imagerotate img:hover {
background:#AD184E !important;
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-ms-transform:rotate(15deg);
}
Hay que modificar el ancho (width) y alto (height) de las imágenes que se tengan en el momento, que por defecto están a 220 y 150 px, respectivamente. Si se desea se pueden cambiar los colores del background.
2.) EN EL GADGET: pegar este código
<div class="imagerotate">
<a href="URL-ENLACE"><img alt="" src="URL-IMAGEN" /></a>
</div>
Tan solo resta poner la URL del enlace que redireccionará la imagen, y también la URL de esta. El código se puede copiar tantas veces como imágenes queramos poner en el gadget. Si no se desea redireccionar la imagen a un enlace, tan solo hay que copiar el código sin la línea de la URL-ENLACE <a href="URL-ENLACE">. Solo hay que dejar la clase "imagerotate" y la línea de la URL-IMAGEN.
