Переход "2 в 1" demoIMGS0

 

 

 

 

 

 

Вставляем в шаблон блога:

 

<style>
  .demoIMG { /* el rectángulo contenedor */
    position:relative; /* indicamos esto para poder posicionar su contenido de maera absoluta */
    height:330px; /* le damos una cierta altura */
    margin:0 auto; /* lo centramos */
    width:500px; /* le damos un cierto ancho */
  }
  .demoIMG img { /* el contenido */
    left: 0; /* posición izquierda */
    position:absolute; /* indicamos que su posición es absoluta con respecto al contenedor */
    top: 0; /* posición superior */
  }
  /* y ponemos propiedades en las clases de cada imagen */
  /* la primera no será visible por defecto */
  .demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}
  /* y se verá cuando pongamos el cursor encima del DIV */
  .demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=100);}
  /* la segunda se ocultara siempre que pongamos el cursor encima del DIV o de la imagen */
  .demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
  .demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);}  
<style>.demoIMGStrans {position:relative;height:330px;width:500px;margin:0 auto;} .demoIMGStrans img {height:330px;width:500px;cursor:pointer;position:absolute;left:0;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;} .demoIMGStrans img.novisible {opacity:0;filter:alpha(opacity=0);} .demoIMGStrans:hover img.novisible {opacity:1;filter:alpha(opacity=100);} .demoIMGStrans:hover img.visible {opacity:0;filter:alpha(opacity=0);} .demoIMGStrans img.visible:hover {opacity:0;filter:alpha(opacity=0);} #demoIMGS0 img {-webkit-transition: none;-moz-transition: none;-o-transition: none;transition: none;} #demoIMGS2 img.novisible {-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);} #demoIMGS2:hover img.novisible {-moz-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);} #demoIMGS2:hover img.visible {-moz-transform:scale(0);-o-transform:scale(0);-webkit-transform:scale(0);} #demoIMGS3 img.novisible {-moz-transform:scale(1,0);-o-transform:scale(1,0);-webkit-transform:scale(1,0); } #demoIMGS3:hover img.novisible {-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);} #demoIMGS3:hover img.visible {-webkit-transform:rotate(360deg) scale(0);-moz-transform:rotate(360deg) scale(0);-o-transform:rotate(360deg) scale(0);}</style>
</style>

Вставляем в поле сообщения:
<div id="demoIMGS0" class="demoIMGStrans"><img class="novisible" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggpMgX-_R-YWV0Kar2iT1NksZMCl7yDdNo0KBhza9DKMASUDlV3sK0MYeZ_O_ZgxQOak9eRMGmFccFfZivnZOpfY4Bzj5CjvTvy5egiXdDDYNYXeMy_alDUl1_HMi79in1ruC95mqiWvTMc6io6ngZzD4CDzPWXmhf9OLSpI5C5OrNi5m-j2GzaxyR/s900/_DSC7468_22.jpg" /><img class="visible" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkuT4MU4nRQf5K8s2bTaenVrmu0nrFKAxbCelSS6YP3lzuYNIl8ws6Zkpx9GbxlyyJqNPkdZTOH5m6xA8hY7oY6Yt5l5qJGThcedTOE6yHCF08Sw49bZXTkE3yx6H_DWh55n3TiW9X1cdq2Vmz21DPcUQQm1rMGE4lhCe9zODTkmG9S9hD_ltAa1kO/s900/_DSC7551_22.jpg" /><br />
<br />
<br />

</div>