Foros del Web - Ver Mensaje Individual - al pasar el mouse por un link aparesca un cuadro con texto e imagen

JavierHF · #3 (**permalink**) 09/10/2012, 09:00

vi en otro post algo asi

Cita:

Iniciado por kseso?

Pues yo sí; quiero llevarla, la contraria.
Sollo por ofrecer una vía a lo que suponemos que el desaparecido pretende.

Ag666, quizás sea mejor algo como lo siguiente.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; outline: none; position: relative;}
html, body {
  height: 100%;
  background: #f5f5f5;
  font-size: 1em;
  font-family: serif;
}
p a {
    display: inline-block;
    text-decoration: underline;
    position: relative;
    font-family: monospace;
    color: #f5f5f5;
    background: #999;
}
p a:hover {background: #444; color: #f5f5f5;}
p a img {display: none; }
p a:hover img {
    display: block;
    position: absolute;
    -moz-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
    -webkit-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
    -o-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
    box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor <a href="#" class="tooltip" title="tooltip">sit amet consectetuer<img src="http://img225.imageshack.us/img225/8876/neversayneveragainirvin.jpg" alt="imagen" /></a> id mauris eleifend volutpat justo. Semper convallis fames dolor augue In sed dapibus eget nisl auctor. Eros ante adipiscing pulvinar dolor turpis mauris mauris adipiscing pellentesque eros. Sit elit justo nunc habitasse nisl vel pulvinar metus sed sociis. Faucibus Vestibulum Donec non ridiculus laoreet malesuada justo dolor Fusce parturient. Tellus tristique tempus faucibus metus Suspendisse Nullam dictumst sodales.</p>
</body>
</html>

me gusto eso , pero muestra solo imagen al pasar el mouse en el link , como seria con imagen y texto