Imágenes con texto desplegable

Vamos a mostrar como podemos poner tanto imágenes como texto plegable en nuestro blog.

Instalar en nuestra plantilla el código Css.

Nos vamos a Tema > Editar HTML y buscamos la etiquea </b:skin> y pegamos arriba el siguiente código

Diseño con texto desplegable

Código CSS

/* Static state */

#container  {

 width: 400px;

 height: 400px;

 position: relative;

 border: 1px solid #ccc;

 background: url(http://artisticthings.com/wp-content/uploads/2010/04/apreis6-400x400.jpg) 0 0 no-repeat;

}

.parent1  {

 height: 0;

overflow: hidden;

-webkit-transition-property: height;

-webkit-transition-duration: .5s;

-webkit-perspective: 1000px;

-webkit-transform-style: preserve-3d;

-moz-transition-property: height;

-moz-transition-duration: .5s;

-moz-perspective: 1000px;

-moz-transform-style: preserve-3d;

-o-transition-property: height;

-o-transition-duration: .5s;

-o-perspective: 1000px;

-o-transform-style: preserve-3d;

transition-property: height;

transition-duration: .5s;

perspective: 1000px;

transform-style: preserve-3d;

}

.parent2 {

 /* full content during animation *can* go here */

 }

.parent3 {

height: 56px;

-webkit-transition-property: all;

-webkit-transition-duration: .5s;

-webkit-transform: rotateX(-90deg);

-webkit-transform-origin: top;

-moz-transition-property: all;

-moz-transition-duration: .5s;

-moz-transform: rotateX(-90deg);

-moz-transform-origin: top;

-o-transition-property: all;

-o-transition-duration: .5s;

-o-transform: rotateX(-90deg);

-o-transform-origin: top;

transition-property: all;

transition-duration: .5s;

transform: rotateX(-90deg);

transform-origin: top;

}

/* Hover states to trigger animations */

  #container:hover .parent1 { height: 111px; }

  #container:hover .parent3 {

   -webkit-transform: rotateX(0deg);

   -moz-transform: rotateX(0deg);

   -o-transform: rotateX(0deg);

   transform: rotateX(0deg);

   height: 111px;

  }

h3.post-title {

 font-family: 'Poppins', sans-serif;

}

body {

 font-family: 'Poppins', sans-serif;

}

.header h1 {

font-family: 'Poppins', sans-serif;

}

.post-body {

  font-family: ‘Poppins’;

}

h3.post-title {

 font-family: 'Poppins', sans-serif;

}

body {

 font-family: 'Poppins', sans-serif;

}

.header h1 {

font-family: 'Poppins', sans-serif;

}

.post-body {

  font-family: ‘Poppins’;

}

 Ahora el HTML lo van a ubicar segun su criterio, puede ser en una entrada o hasta un gadget

Código HTML

<center><div id="container">

  <div class="parent1">

   <div class="parent2">

    <div class="parent3">

    <img src="https://blogger.googleusercontent.com/img/proxy/AVvXsEjwYU-9zR-1qiyl68ObLwTwg-pEq3vVYPBiQOVp8hhVK_MITQCArsKMh5HpL2etEO5VsAMqPBAlMdOrCw_GYK3G7ZvgzC1So9t9g-2bRwwkrv8BFyRRKLJtpNb0n_YLaVZD09eI8ks5xDEgPJtW=" style="opacity: .7;">    </div>

   </div>

  </div>

  </div></center>

Diseño con texto desplegable

Código CSS

/* Static state */

#container  {

 width: 400px;

 height: 400px;

 position: relative;

 border: 1px solid #ccc;

 background: url(http://static1.actualidadiphone.com/wp-content/uploads/2010/11/AngryBirds_Xmas_GameIcon_512x512-400x400.png) 0 0 no-repeat;

}

.parent1  {

 height: 0;

overflow: hidden;

-webkit-transition-property: height;

-webkit-transition-duration: .5s;

-webkit-perspective: 1000px;

-webkit-transform-style: preserve-3d;

-moz-transition-property: height;

-moz-transition-duration: .5s;

-moz-perspective: 1000px;

-moz-transform-style: preserve-3d;

-o-transition-property: height;

-o-transition-duration: .5s;

-o-perspective: 1000px;

-o-transform-style: preserve-3d;

transition-property: height;

transition-duration: .5s;

perspective: 1000px;

transform-style: preserve-3d;

}

.parent2 {

 /* full content during animation *can* go here */

 }

.parent3 {

height: 56px;

-webkit-transition-property: all;

-webkit-transition-duration: .5s;

-webkit-transform: rotateX(-90deg);

-webkit-transform-origin: top;

-moz-transition-property: all;

-moz-transition-duration: .5s;

-moz-transform: rotateX(-90deg);

-moz-transform-origin: top;

-o-transition-property: all;

-o-transition-duration: .5s;

-o-transform: rotateX(-90deg);

-o-transform-origin: top;

transition-property: all;

transition-duration: .5s;

transform: rotateX(-90deg);

transform-origin: top;

}

/* Hover states to trigger animations */

  #container:hover .parent1 { height: 111px; }

  #container:hover .parent3 {

   -webkit-transform: rotateX(0deg);

   -moz-transform: rotateX(0deg);

   -o-transform: rotateX(0deg);

   transform: rotateX(0deg);

   height: 111px;

  }

 Ahora el HTML lo van a ubicar segun su criterio, puede ser en una entrada o hasta un gadget

Código HTML

<center><div id="container">

  <div class="parent1">

   <div class="parent2">

    <div class="parent3">

   <div class="text-parent3" style="color: #fff;background: rgba(0, 0, 0, .5)">

     <span style="color: #fff; font-size: 24px; display: block; padding: 20px 0 0 20px; 1px 1px 0 rgba(0, 0, 0, 0.25)">TITULO</span>

     <span style="color: #fff; font-size: 16px; display: block; padding: 20px 0 0 100px; 1px 1px 0 rgba(0, 0, 0, 0.25)">Subtitulo</span>

    </div>    </div>

   </div>

  </div>

  </div></center>

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso