Mostrar el contenido al pasar el ratón

Hoy vamos a explicar la forma de poner un contenedor en nuestra página que al pasar el ratón nos muestra un contenido extra.

Esto es lo que se ve.

Texto oculto

Para empezar nos tenemos que meter en nuestra plantilla.

Plantilla> Editar HTML

Buscamos con Ctrl + F ]]></b:skin> y añadimos justo antes el siguiente código.
Aquí te dejo el botón como se mostraría

.infobox {
    position:relative;
    border:1px solid #000; 
    background-color:#CCC;
    width:73px;
    padding:5px;
    }
.infobox img {
 position:relative;
 z-index:2;
    }
.infobox .more {
 display:none;
    }
.infobox:hover .more {
 display:block;
    position:absolute;
    z-index:1;
    left:-1px;
    top:-1px;
    width:73px;
    padding:78px 5px 5px;
    border:1px solid #900;
    background-color:#FFEFEF;
    }











ía

Guardamos los cambios y en un gadget de HTML añadimos los siguiente:

<div class="infobox">
   <img src="Url-de-la-imagen">
   <div>Texto que se ve.</div>
 <div class="more">Texto oculto</div>
</div>