Imagen de sustitución en Gadget (Efecto Newspaper)

Imagen de sustitución en Gadget (Efecto Newspaper)

Ya vimos anteriormente como presentar imágenes de sustitución con un efecto de cambio sencillo.

Esta vez, podrás presentar una imagen sustituida por otra, con efecto presentación de Diario (Newspaper), al posar el mouse sobre ella.

Como dije antes, es cierto, existen varios plugins que permiten poner efectos a las imágenes que deseas presentar en tu blog o sitio web, pero por ejemplo para el caso de Blogger u otras plataformas con ciertas limitaciones, tienes que recurrir a artilugios o buscar códigos para poder darle ese “toquecillo” que deseas para las imágenes.

Puedes ver el ejemplo en la barra derecha, solo pasa el mouse sobre ella y verás el efecto. Si haces clic activarás el vinculo a este mismo post.

Antes de proceder:

• Si deseas insertar el CSS en una plataforma No Blogger, deberás insertarlo antes de la etiqueta </head> y entre las etiquetas  <style >  y  </style>, por ejemplo:

<style type="text/css">
...Aquí pegas código CSS...
</style>
</head>

• En Blogger, también puedes hacerlo, pero para que no toques las plantilla, el código CSS puedes insertarlo tal como te lo muestro, utilizando las opciones: 

            Tema     -->   Personalizar    -->    Avanzado    -->    Añadir CSS 

MANOS A LA OBRA
1. El código CSS es el siguiente:

 /* ======  Imagen de sustitución - RollOverNewsPaper ======  */
#RollOverNewsPaper a
{
   display: block;
   position: relative;
   height: 100%;
   width: 100%;
}


/* Imagen de sustitución */
#RollOverNewsPaper span
{
   position: absolute;
   top: 0;
   left: 0;
   -webkit-transition: all 500ms linear;
   -moz-transition: all 500ms linear;
   transition: all 500ms linear;
   -webkit-transform: rotate(720deg) scale(0);
   -moz-transform: rotate(720deg) scale(0);
   transform: rotate(720deg) scale(0);
   opacity: 0;
   width: 100%;
   height: 100%;
}


#RollOverNewsPaper:hover span
{
   -webkit-transform: rotate(0deg) scale(1);
   -moz-transform: rotate(0deg) scale(1);
   transform: rotate(0deg) scale(1);
   opacity: 1;
   z-index: 9999;
}

#RollOverNewsPaper_caption
{
    position: relative;
}


#RollOverNewsPaper_caption img
{
   padding: 0;
}


/* Imagen (vista normal) */
#RollOverNewsPaper img
{
   border-width: 0;
border-radius:10px;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}

Blogger. Una vez insertado, no olvides darle clic en Aplicar al blog.  (Grabarlo)

2. Inserta el siguiente código donde desees que aparezca la Imagen.

En Blogger, ahora lo que tienes que hacer es insertar lo siguiente dentro de un gadget.

  Diseño   -->   Añadir un gadget  -->   HTML/Javascript  <Insertas el código>  Grabar.

 <!-- Imagen de sustitución - Efecto Newspaper -->
<div  id="RollOverNewsPaper" style="width:250px;height:250px;position:relative;left:25px;border-radius:10px;">
<a href="url hipervinculo">
<img class="hover" alt="" src="url imagen principal" />
<span id="RollOverNewsPaper_caption" title=""><img alt="" src="url imagen que sustituye a principal" /></span>
</a>
</div>

Recuerda que puedes definir un hipervínculo para redirigir a otro sitio o página que desees.

Puedes cambiar las dimensiones de la imágenes con widht y height.

El resultado prácticamente lo dispones tú, aunque para cualquiera de los casos puedes presentar las imágenes de una manera más atrayente que la ofrecida por blogger en su modo nativo.

Quizás también te interese:

Presentar imágenes con efecto de cambio sencillo.