Como faço para aparecer uma imagem em uma div separada no mouseover de uma div usando apenas CSS?

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

  •  01-07-2019
  •  | 
  •  

Pergunta

Eu tenho uma pequena galeria de thumbnails. Quando coloco o ponteiro do mouse sobre uma imagem em miniatura que eu gostaria de ter uma imagem em tamanho real aparecer em uma div no canto superior direito da tela. Eu vi este feito usando apenas CSS e eu gostaria de ir por esse caminho em vez de usar javascript, se possível.

Foi útil?

Solução

CSS Pure Popups2 , a partir do mesmo local que traz-nos Complexspiral . Note que este exemplo é usar links de navegação reais como o elemento rolou-over. Se você não quer isso, ele pode causar alguma rigidez sobre as versões do IE.

A técnica básica é ficar cada imagem dentro de uma tag link com um href real (Caso contrário, algumas versões do IE vai negligenciar: hover) 

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

e posicioná-lo de forma inteligente utilizando a posição absoluta. Ocultar a imagem inicialmente 

a img.popup { display: none }

e, em seguida, no link rollover, configurá-lo para aparecer. 

a:hover img.popup { display: block }

Essa é a técnica básica, mas há sempre vai ser maiores limitações de posicionamento desde a tag de imagem habita dentro da tag link. Veja o link para mais detalhes; ele usa algo um pouco mais complicado do que o display:. Nenhum para ocultar a imagem

Outras dicas

CSS Parque usa CSS puro para este tipo de coisa, um dos demos é, certamente, ajuda você e como é tudo CSS apenas visualizar fonte para aprender - você provavelmente vai querer usar o:. pseudo classe pairar mas há limitações para que dependendo segmentação seu browser

O Eric Meyer Popups CSS puro 2 demonstração soa bastante semelhante ao o que você quer.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top