En Snook nos explican la forma de utilizar un contenedor y que al pasar el ratón nos muestre un contenido extra. El ejemplo del autor puede verse aquí.
Y añadiendo una imagen tal como sugiere el resultado sería el que vemos a continuación: 


Here's what you have.
Here's more of a description of what we have going on here.

Para hacerlo utilizamos CSS. Nos situamos antes de ]]></b:skin> y añadimos lo siguiente:

.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;
    }
Guardamos los cambios y en un gadget de HTML añadimos los siguiente:

<div class="infobox">
   <img src="Url-de-la-imagen">
   <div>Here's what you have.</div>
 <div class="more">Texto oculto</div>
</div> 
Retocando un poco el CSS podemos hacer lo mismo y que resulte algo más vistoso.


Bienvenidos a este blog!

Autodidacta por vocación y apasionada del diseño y todo lo relacionado con Blogger.
Colaboradora en
www.reinventaweb.com

De igual forma nos situaríamos antes de ]]></b:skin> y añadimos los estilos:

<style type="text/css">
    .infobox {
    background-color: #FFFFFF;
    padding: 0;
    position: relative;
    width: 100px;
}
.infobox h2 {
    color: #000000;
    font-size: 11px;
    letter-spacing: 1px;
    margin: 10px 0 0 20px !important;
    padding: 0 0 0 10px !important;
    text-align: left;
    text-shadow: 1px 1px 0 #CCCCCC;
    text-transform: none;
}
.infobox img {
    border: 3px solid #FFFFFF;
    border-radius: 100px 100px 100px 100px;
    box-shadow: 1px 1px 1px #333333;
    float: left;
    margin: 10px 25px 5px 10px;
    opacity: 0.9;
    position: relative;
    width: 95px;
    z-index: 2;
}
.infobox .more {
    display: none;
}
.infobox:hover .more {
    background-color: #BF7195;
    border: 3px double #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    color: #FFFFFF;
    display: block;
    left: 0;
    padding: 15px 10px 10px 120px;
    position: absolute;
    top: -10px;
    width: 200px;
    z-index: 1;
    height: 135px;
}
.infobox:hover a {
  text-shadow: none;
    color: #000000;
}
</style>
<div class="more">
<span style="color: white; font-family: Arial, Verdana,Tahoma,; font-size: 12px; text-shadow: 1px 1px 1px #000000;">Contenido oculto<br> Texto en negrita </span><a target="_blank" href="Url-del-enlace">Texto enlace</a></div>
</div>
Los cambios a realizar está detallados en el HTML, en "Contenido oculto" lo sustituimos por el contenido que deseamos mostrar. "Texto en negrita" es el texto final y si no lo deseamos simplemente eliminamos la línea de texto.
Y por último donde "Url-del-enlace" y "Texto-enlace" lo sustituimos también por el nuestro o simplemente eliminamos esa linea pero respetando los dos cierres finales de la etiqueta </div>
Cocina Coco

Que bueno se ve Gem@!:)

Gem@

Hola cuanto tiempo!! me alegra que te guste :)

Responder
gramalina

Me gusta mucho.

Gem@

Todo tuyo gramalina ;)

Responder
m.p.moreno

¡Qué interesante y qué bonito con la aplicación CSS! De momento no sé donde aplicarlo, pero me ha gustado tanto que ya se me ocurrirá algo.

Un cariñoso abrazo Julia :)

Gem@

Otro abrazo para ti m.p.moreno :)

Responder
Localiza Recursos Sociales en el Municipio de Oviedo

Hola Gem@ : Me encanta!!!, lo probé y se ve estupendo.Como cambio el color rosa de fondo por otro.Serías tan amable de resolver mi duda?
Un saludo

Gem@

En los siguientes estilos detallo las modificaciones que puedes hacer:

.infobox:hover .more {
background-color: #BF7195; /* color de fondo */
border: 3px double #FFFFFF; /* tipo de borde y color*/
border-radius: 10px 10px 10px 10px; /* redondear esquinas */
color: #FFFFFF; /* acolor de fuente*/
display: block;
left: 0;
padding: 15px 10px 10px 120px;
position: absolute;
top: -10px;
width: 200px;
z-index: 1;
}

Localiza Recursos Sociales en el Municipio de Oviedo

Muchísimas gracias,quedó precioso pero no logro saber que hice mal ya que me quedó una raya encima.Si no es mucha molestia y quieres verlo,es el primer gadget de la izquierda,lo puse arriba para que lo localices.
Eres muy rápida y muy amable.Muchas gracias de nuevo

Responder
Localiza Recursos Sociales en el Municipio de Oviedo

Ya logré quitar la raya.Quedó genial

Gem@

Me alegra que ya esté resuelto :)

Responder
Locomacho

Gracias, me suscribo ☺☻☺

Responder
XIC Nou Barris

hola gema, que tal estás? soy núria de cosas de núria,,, he puesto este truco en mi otro blog, xic nou barris; pero no entiendo porque la foto me sale redonda y no cuadrada como la original, espero me ayudes, tampoco consigo que me quede la imagen más centrada, me sale abajo. Bueno, cuando puedas y tengas un ratito lo miras. Gracias como siempre. núria

Gem@

Hola Nuria, para que la imagen quede cuadrada elimina la línea:
border-radius: 100px 100px 100px 100px;
(La encontraárs en los estilos de la imagen :)

Responder
unhidalgo

Como todo lo tuyo es muy bueno.

Te dejo esto por si a alguien pudiera interesarle:

CÓDIGO PARA UN VIDGET QUR MUESTRA LOS NOMBRES DE LOS COMENTARISTAS QUE MAS LO HACEN Y EL NÚMERO DE COMENTARIOS QUE HAN ESCRITO.


<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function blnube_centro(feed) {
max = 0;
min = 10000;
for (i=0;i<feed.count;i++)
{
blnube_elements = feed.value.items[i].commentcount * 1;
if (blnube_elements > max)
{
max = blnube_elements;
}
if (blnube_elements < min)
{
min = blnube_elements;
}
}
blnube_elementos = "";
display = "";
for (blnuub=0;blnuub<feed.count;blnuub++)
{
blnube_parent = feed.value.items[blnuub].commentcount - min;
blnube_tam = 80 + (blnube_parent * 100) / (max - min) + "%";
blnube_autrr = "'" + feed.value.items[blnuub].authorurl + "'";
blnube_elementos = "(" + feed.value.items[blnuub].commentcount + ")";
blnubID = feed.value.items[blnuub].title + blnube_elementos;
blnubID2 = "<a style='text-decoration:none;font-size:" + blnube_tam + "' href=" + blnube_autrr + " target='_blank'>" + blnubID + " </a>";
display = display + blnubID2;
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=[http]
&Exclusions=Anonymous,Jaime Trujillo Escobedo
&_callback=blnube_centro
&ShowHowMany=30
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
<center><span style="line-height: 30px; margin-top:20px; text-decoration: none; border: 1px solid #ccc; padding: 2px; "><a href="[http] 2012/03/nube-de-top-comentaristas-para-el-blog.html" target="_blank">Conseguir este widget</a></span></center>
</div>


Para conseguir este widget solo hay que poner la url del blog donde pone [http]. Para ti o por si te apetece ponerle un una entrada.

Gem@

Muchas gracias por compartirlo y por la primera frase :)
Lo pondremos a prueba :)

Responder
whereORwhat

Acabo de descubrir tu blog y me está siendo de gran ayuda para renovar la imagen del mío. Vi un post tuyo sobre imágenes con Hover, y éste efecto lo he intentado aplicar para el header pero me está siendo imposible. Te podría preguntar como lo harías?

http://whereorwhat.blogspot.com.es/

Gem@

Hola whereORwhat ¿en concreto que deseas hacer? si es un afecto hover en la cabecera ¿qué clase de efecto?

whereORwhat

Gracias por contestar! Me gustaría que la imagen se sustituyese por otra cuando se pasa el ratón encima de ella

Gem@

He mirado tu plantilla y me resulta confuso la forma que están añadidas las imágenes, al parecer tienes la imagen de la cabecera de esta forma:

#header-inner {<a href="http://whereorwhat.blogspot.com.es/"><img src="http://imageshack.us/a/img28/720/cabecero4.png" onmouseover="this.src='http://imageshack.us/a/img841/4262/cabecero4b.png'" onmouseout="this.src='http://imageshack.us/a/img841/4262/cabecero4b.png'" /></a> width:1500px; margin-left:-100px;margin-right:-100px;}

La etiqueta imagen no debería estar ahí, lo correcto sería añadir la url de la imagen de esta forma:

background: transparent url(http://imageshack.us/a/img841/4262/cabecero4b.png) repeat scroll top left;

Aún así y más sencillo todavía sería subir la imagen con el gadget de cabecera, luego a partir de ahí crear unos estilos con efecto hover para que al pasar el ratón la imagen cambiara.

Otra opción sería anular la cabecera y añadir la imagen en un gadget de html para posteriormente crear ese efecto.

Entiendo que te pueda confundir lo que digo pero no veo otra forma de crear esa cabecera desde cero para conseguir lo que quieres.

Responder
José GDF

A mi ya se me ha ocurrido algo. Me falta reunir algo de tiempo libre para experimentar y a ver si funciona.

Que pases unas felices fiestas y empieces el año con buen pie ;)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top