Como se logra este efecto? con CSS?

Hola, que tal? mi pregunta es la siguiente....

estaba navegando por el sitio de blackberry y vi...en el pie de la pagina....un icono que dice...Blackberry en facebook livestream....al pasar el mouse aparece el live stream.

He incluido livestream en mi web...pero de la forma que lo hacen en la pagina de blackberry me parece muy llamativo y ...queda cool

Estuve revisando el codigo fuente...pero no logro dar con el css..o el codigo que me de ese efecto

la pagina en cuestion es: http://ar.blackberry.com/


Si alguien me puede decir como se logra ese efecto


Desde ya muchas gracias

Puedes hacerlo con CSS o con jQuery.

Si te fijas tiene el iframe del livestream oculto y se ejecuta la acción de mostrarlo al hacer hover sobre el elemento "ftrFacebook".

Gracias....llego hasta esta parte:

<li id="ftrFacebook" class="footerBg" style="display: none;"><a href="#" class="ftrLink"><span>&nbsp;</span>BlackBerry en Facebook Livestream<div>&nbsp;</div></a>

<div id="ftrFacebookNav"></div></li>


El resto del codigo donde esta?
Eso es lo que no encuentro: podrias darme una idea...con un ejemplo sencillo como se puede hacer....unas pocas lineas de codigos, te estaria eternamente agradecido.

Saludos

encontre en base.css esto:

#ftrFacebook{width: 230px;}
#ftrFacebook a span{
display: block;
width: 16px;
height: 16px;
background: url(/assets_refresh/images/footerFacebookIconSprite.png) no-repeat top left;
margin:-3px 4px 0 0;
float: left;
}
#ftrFacebook:hover span{
background-position: bottom left;
}

este el codigo que causa el efecto?.....no lo entiendo....

¿Qué tan agradecido? ¿Me depositarías dinero a mi cuenta?

Puedes revisar este demo que hice, te pego el código de todos modos:

Código :

<style>
body { height: 100%; }
#facebook { bottom: 0; position: absolute; }
#facebookstream { height: 300px; width: 275px; border: 1px solid red; position: absolute; bottom: 20px; overflow-y: scroll; display: none; }
#facebook:hover + #facebookstream, #facebookstream:hover  { display: block; }
</style>
<a href="#" id="facebook">Mostrar popup</a>
<div id="facebookstream">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed quam velit, id scelerisque odio. Suspendisse sagittis rutrum cursus. Morbi dictum metus nec justo porttitor a tincidunt diam accumsan. Pellentesque quis est orci. Nulla eleifend dolor sit amet tellus accumsan pellentesque. Duis id mollis eros. Donec malesuada sem mi. Proin mollis cursus iaculis. Maecenas tempus scelerisque molestie. Donec vel odio vel nunc convallis sagittis in id purus. Nunc sapien augue, aliquam vitae ultricies ac, elementum nec ante.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras lacinia justo at massa lacinia et ullamcorper neque aliquam. Proin aliquam aliquam feugiat. Morbi massa nibh, scelerisque non commodo faucibus, lacinia sit amet leo.</p>
</div>

Esa es la base en CSS, investiga un poco más acerca de como mostrar u ocultar contenedores con jQuery.

Suerte.

Muchisimas gracias...me parece que ya encontre ...lo que causa el efecto:

$("#ftrFacebook").hover(function () {
if ($('#ftrFacebookNav iframe').length == 0) {
$('#ftrFacebookNav').html('<iframe src="http://www.facebook.com/plugins/likebox.php?' + rim.lang.facebook.id + '&width=292&connections=10&stream=true&header=false&height=455&locale='+rim.lang.facebook.locale+'" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:292px; height: 455px; background:#fff;"></iframe>');
}
$('#ftrFacebookNav').css({ display: 'block' });
}, function () {
$('#ftrFacebookNav').css({ display: 'none' });
});



Muchas gracias por tu tiempo