¿Cómo abro una imagen en un div separado al pasar el mouse sobre un div usando solo CSS?

StackOverflow https://stackoverflow.com/questions/108461

  •  01-07-2019
  •  | 
  •  

Pregunta

Tengo una pequeña galería de miniaturas.Cuando coloco el puntero del mouse sobre una imagen en miniatura, me gustaría que aparezca una imagen de tamaño completo en un div en la parte superior derecha de la pantalla.He visto que esto se hace usando solo CSS y, si es posible, me gustaría seguir ese camino en lugar de usar JavaScript.

¿Fue útil?

Solución

Ventanas emergentes CSS puro2, del mismo sitio que nos trae Complexspiral.Tenga en cuenta que este ejemplo utiliza enlaces de navegación reales como elemento desplazado.Si no desea eso, puede causar cierta rigidez con respecto a las versiones de IE.

La técnica básica es pegar cada imagen dentro de una etiqueta de enlace con un href real (de lo contrario, algunas versiones de IE ignorarán :hover)

<a href="#">Text <img class="popup" src="pic.gif" /></a>

y colóquelo inteligentemente usando la posición absoluta.Ocultar la imagen inicialmente

a img.popup { display: none }

y luego en el enlace emergente, configúrelo para que aparezca. 

a:hover img.popup { display: block }

Esa es la técnica básica, pero siempre habrá importantes limitaciones de posicionamiento ya que la etiqueta de la imagen se encuentra dentro de la etiqueta del enlace.Consulte el enlace para obtener más detalles;usa algo un poco más complicado que mostrar:ninguno para ocultar la imagen.

Otros consejos

Patio de juegos CSS usa CSS puro para este tipo de cosas, una de las demostraciones seguramente lo ayudará y, como todo es CSS, solo vea el código fuente para aprender; probablemente desee usar la pseudoclase :hover, pero existen limitaciones dependiendo de la orientación de su navegador. .

Eric Meyers Ventanas emergentes CSS puro 2 La demostración suena lo suficientemente similar a lo que quieres.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top