Basato sulla creazione di un immagine mappata in css, possiamo creare un effetto zoom su un dettaglio di un immagine di sfondo.
Immagine di preview:
{ 12 comments }
Posts tagged as:
Risultati per css immagine
Sempre un pò curiosa di rifare esempi flash puramente in css, ho ripreso l’idea della galleria flash chiamata Illusion creata da Flep.
Questa galleria css d’immagini riusa stesse immagine sia per le miniature in verticale (impostate come sfondo con la proprietà background) che per la loro visualizzazione completa sullo stato hover (elemento <img>) dei link con relativa descrizione (elemento <span>).
Questi 2 elementi sono nascosti inizialmente con il display:none; e resi visibile con il display:block; impostando un z-index superiore per ricoprire le miniature e posizionati in modo assoluto in relazione al <div> contenitore.
{ 10 comments }
Qualche righe di css, per impostare un immagine di sfondo al 100% ridimensionabile con la finestra del browser.
Sia il corpo della pagina che l’immagine (con id=”sfondo”) hanno una larghezza e altezza di 100%.
Le loro margine (margin) e ’spazi cuscinetti’ (padding) sono azzerati per evitare tutto spazio bianco intorno.
Con la proprietà css overflow evitiamo che vengono visualizzate le barre di scorrimento della finestra del browser. Finalmente, l’immagine è posizionata in modo assoluto per toglierla del flusso naturale della pagina e potere essere ridimensionata correttamente.
{ 0 comments }
