2011-09-14 22 views

risposta

19

#images{ 
 
    padding:30px; 
 
} 
 
#images img{ 
 
    position:relative; 
 
    float:left; 
 
    height:100px; 
 
    margin:5px; 
 
    transition:0.3s; 
 
    box-shadow: 0 0 0 10px #fff; 
 
} 
 
#images img:hover{ 
 
    z-index:2; 
 
    transform: scale(1.2); 
 
} 
 
#images img:hover:after{ 
 
    content: attr(title); 
 
}
<div id="images"> 
 
    <img src="http://dummyimage.com/180x120/000/fff" alt=""/> 
 
    <img src="http://dummyimage.com/175x104/f0f/fff" alt=""/> 
 
    <img src="http://dummyimage.com/150x100/a3d/fff" alt=""/> 
 
    <img src="http://dummyimage.com/278x125/cf5/fff" alt=""/> 
 
    <img src="http://dummyimage.com/199x120/e46/fff" alt=""/> 
 
    <img src="http://dummyimage.com/207x480/361/fff" alt="" /> 
 
    <img src="http://dummyimage.com/400x107/081/fff" alt="" /> 
 
    <img src="http://dummyimage.com/50x40/cc3/fff" alt="" /> 
 
    <img src="http://dummyimage.com/700x500/233/fff" alt="" /> 
 
    <img src="http://dummyimage.com/300x120/a26/fff" alt="" /> 
 
    <img src="http://dummyimage.com/341x177/f10/fff" alt="" /> 
 
</div>

+0

+1 Bel plugin, amico. – f0x

+0

Nooo non ha bisogno di un suggerimento. Hai provato la ricerca di immagini su google? – 3zzy

+0

@Nimbuz - riadattato. –

0

Ecco un'opzione per un plugin mouseover anteprima Tipo: imgpreview

C'è anche questo, controllare il secondo demo: http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Beautytips potrebbe anche essere di qualche utilità, sembra abbastanza flessibile. La scatola di stile Netflix è abbastanza carina.

+0

Nooo non ha bisogno di un suggerimento. Hai provato la ricerca di immagini su google? - Nimbuz ora modifica solo – 3zzy

+0

Ho molta familiarità con GIS. Guarda la demo di imgpreview: http://james.padolsey.com/demos/imgPreview/full/ Verso il basso, ottiene molto più anteprima e molto meno tooltip. –

2

che stavo cercando la stessa cosa e dovuto costruire un plugin scalabile. Ciò che è stato importante per me è stato ridimensionato all'interno di Wapper o del browser come google.

Ecco il plugin con una demo

DEMO

Download plugin on Github

Spero che questo aiuta

+1

grazie per il tuo lavoro! Stavo cercando qualcosa di scalabile! grandioso fantastico! – JinSnow

Problemi correlati