Come faccio a far apparire un'immagine in un div separato al passaggio del mouse su un div usando solo CSS?
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.
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.
Ecco alcuni esempi:
- Galleria di immagini CSS
- Galleria fotografica multipagina per browser
- Una galleria di immagini solo CSS: spiegazione
- Una galleria di immagini solo CSS: esempio
Quest'ultimo agisce al clic. Giusto per essere completo nei comportamenti.