Come faccio a far apparire un'immagine in un div separato al passaggio del mouse su un div usando solo CSS?

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

  •  01-07-2019
  •  | 
  •  

Domanda

Ho una piccola galleria di miniature. Quando posiziono il puntatore del mouse su un'immagine di anteprima, vorrei che un'immagine a dimensione intera si aprisse in un div nella parte superiore destra dello schermo. Ho visto questo fatto usando solo CSS e mi piacerebbe percorrere quella strada piuttosto che usare JavaScript se possibile.

È stato utile?

Soluzione

Pure CSS Popups2 , dallo stesso sito che ci porta Complexspiral . Si noti che questo esempio utilizza i collegamenti di navigazione effettivi come elemento di roll-over. Se non lo desideri, potrebbe causare una certa appiccicosità rispetto alle versioni di IE.

La tecnica di base è quella di incollare ogni immagine all'interno di un tag di collegamento con un href effettivo (altrimenti alcune versioni di IE trascureranno: hover) 

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

e posizionalo abilmente usando la posizione assoluta. Nascondi inizialmente l'immagine 

a img.popup { display: none }

e quindi al passaggio del mouse sul collegamento, impostalo in modo che appaia. 

a:hover img.popup { display: block }

Questa è la tecnica di base, ma ci saranno sempre importanti limiti di posizionamento poiché il tag immagine risiede all'interno del tag link. Vedi il link per i dettagli; usa qualcosa di un po 'più complicato del display: nessuno per nascondere l'immagine.

Altri suggerimenti

CSS Playground utilizza CSS puro per questo tipo di cose, una delle demo è sicuramente di aiuto tu e dato che è tutto CSS basta vedere la fonte per imparare - probabilmente vorrai usare la pseudo classe: hover ma ci sono delle limitazioni a seconda del targeting del tuo browser.

La demo Pure CSS Popups 2 di Eric Meyer sembra abbastanza simile a quello che vuoi.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top