css - sobre - mostrar imagen al pasar el mouse html

Mostrar imagen en enlace de texto Hover CSS solamente

Question

Tengo un enlace de texto. Cuando el usuario pasa el mouse sobre el enlace de texto, quiero que se muestre una imagen en otro lugar de la página. Quiero hacer esto usando css. Pensé que podría hacerse simplemente con una sola línea de código en el enlace como un onmouseover, pero parece que requiere otro código en otro lugar de la página.

Intenté usar a: hover con la imagen que quiero mostrar como imagen de fondo, pero no creo que se pueda manipular para que se muestre en su totalidad en lugar de recortarla al tamaño del enlace de texto.

Veo cientos de resultados cuando trato de buscar esto, pero ninguno de ellos es lo que quiero. Lo más cercano que encontré fue esto.

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

Pero eso funciona al pasar el cursor sobre las imágenes en miniatura. Solo quiero que el usuario pase el mouse sobre un solo enlace de texto para mostrar una imagen en la página en otro lugar. Encontré esa galería de este hilo: Pop up image css link on hover

No quiero tratar con lo que sea jquery o demasiados scripts porque estoy más familiarizado con css. ¿Alguien sabe de una manera simple de hacer esto o todavía no hay manera, ni siquiera con todos los cambios realizados para css3?

¡Gracias!

Answer 1

CSS no podrá llamar a otros elementos como ese; deberá usar JavaScript para llegar más allá de un selector secundario o hermano.

Podrías probar algo como esto:

<a>Some Link
<div><img src="/you/image" /></div>
</a>

entonces...

a>div { display: none; }
a:hover>div { display: block; }

Answer 2

No es posible hacer esto solo con CSS, necesitarás usar Javascript.

<img src="default_image.jpg" id="image" width="100" height="100" alt="" />
<a href="page.html" onmouseover="document.images[''image''].src=''mouseover.jpg'';" onmouseout="document.images[''image''].src=''default_image.jpg'';"/>Text</a>

Answer 3

Se puede hacer usando CSS solo. Funciona perfectamente en mi máquina en el navegador Firefox, Chrome y Opera en Ubuntu 12.04.

CSS:

.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }

HTML:

<div class="hover_img">
<a href="#">Show Image<span><img src="images/01.png" alt="image" height="100" /></span></a>
</div>

Answer 4

añadir

.hover_img a:hover span {
display: block;
width: 350px;
}

para mostrar la imagen al pasar el ratón a tamaño completo en la tabla, cambia 350 a tu tamaño.