texto sobre por pasar para mostrar informacion imagenes imagen efectos efecto dar con cambiar bootstrap css xhtml popup

sobre - ¿Cómo puedo mostrar una imagen en un div separado en el mouseover de un div usando solo CSS?



mostrar texto hover css (4)

La demo Pure CSS Popups 2 de Eric Meyer suena lo suficientemente parecida a lo que quieres.

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 esto hecho usando solo CSS y me gustaría ir por esa ruta en lugar de usar javascript si es posible.

Pure CSS Popups2 , del mismo sitio que nos trae Complexspiral. Tenga en cuenta que este ejemplo utiliza enlaces de navegación reales como elemento transferido. Si no quiere eso, puede causar cierta pegajosidad 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 se descuidan: hover)

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

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

a img.popup { display: none }

y luego en la transferencia del enlace, configúralo para que aparezca.

a:hover img.popup { display: block }

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

CSS Playground usa pure CSS para este tipo de cosas, una de las demos es seguramente para ayudarte y, como todo es CSS, solo tienes que ver la fuente para aprender: probablemente quieras usar la clase pseudopoder: pero hay limitaciones dependiendo de tu orientación del navegador.