Naturalmente, ci sono molti modi per ingrandire le immagini. E principalmente viene utilizzato l'uso di script e plugin. A mio avviso, tali metodi sono giustificati nel caso di risorse con un numero enorme di fotografie o immagini. Il mio blog non è così. E, come al solito, seguo il percorso del minor dispendio di tempo, conoscenza e risorse sul mio sito. Ti offro un modo per aumentare...

Potrebbe interessarti anche:

Rimuoviamo da pagina iniziale e voci RSS della categoria

Continuiamo a migliorare la funzionalità e aspetto sito. Rimuoviamo i post non necessari dalla pagina principale e dagli RSS.

pangrattato sul sito WordPress

Breadcrumb sul sito web: cosa sono e come si fanno?

Come creare un'ombra di testo in 5 minuti

Ciao, caro lettore del mio blog. In questo articolo imparerai come creare in 5 minuti utilizzando gli stili CSS e codice html ombra del testo.

Come creare un pulsante di download utilizzando il codice CSS

Ciao, caro lettore del mio blog. Continuo l'argomento dei pulsanti. Questo articolo parlerà di come creare un pulsante di download utilizzando il codice CSS.

Come creare i pulsanti verso il basso per un sito web

Ciao cari lettori. Ho pensato e pensato e ho deciso di scrivere un articolo su come ingrandire magnificamente le foto quando ci passi sopra con il mouse.

La mia gioia non conosceva limiti, e non perché caratteristica interessante, e non perché l'infanzia giochi in un posto :) Voglio dire che non mi aspettavo un simile effetto.

Sono un blogger nuovo, giovane, principiante. Programmi per ufficio Praticamente non sapevo come usarlo, figuriamoci Photoshop. Ho creato un blog, ma si è scoperto che dovevo imparare dal basso. Una teiera con una teiera. Tutto quello che sapevo fare era fare uno screenshot in Paint.

Oserei dire che era impossibile guardare i miei screenshot senza lacrime. Ma inaspettatamente, quando ho sperimentato e aggiunto il gadget al blog, le mie foto hanno iniziato a giocare, brillare, brillare di colori vivaci, sembravano prendere vita e iniziare un'altra nuova vita, a loro è stato aggiunto il contrasto.

Tutte le immagini sul blog avranno un effetto di ingrandimento uniforme. Le immagini non si ingrandiscono fino a riempire l'intero schermo, ma scorrono facilmente e prendono vita. Vero effetto 3D.

Come installare il gadget "Zoom immagine uniforme al passaggio del mouse" in Blogger

Il codice si installa ovunque come un normale gadget HTML/JavaScript. Puoi leggere l'articolo “” sul mio blog.

Ora c'è bisogno di un bellissimo ingrandimento delle immagini al passaggio del mouse. E niente JS! Ma gli utenti dei browser più vecchi non vedranno nulla. Gli sta bene.

Su Internet non ho trovato nulla di completo, né di posizione: si usa l’assoluto, oppure il contenuto si allontana, lasciando il posto all’immagine, che non sempre è accettabile.

Quindi cominciamo. Tutto quello che devi specificare è impostare la classe dell'immagine. Imposteremo, come sempre, separatamente per la sinistra, separatamente per la destra e separatamente per il centro. Ciò è dovuto alla particolarità dell'ingrandimento dell'immagine. Dopotutto, se l'immagine è a sinistra, una volta ingrandita dovrebbe spostarsi a destra, altrimenti sui monitor piccoli l'immagine fluttuerà fuori dal browser.

Codice HTML per l'immagine visualizzata a sinistra (l'immagine viene ingrandita, spostare il mouse sull'immagine):

E un po' di CSS, dove indichiamo la dimensione della miniatura, la posizione (a sinistra), il confezionamento e anche l'ingrandimento dell'immagine al passaggio del mouse:

img .img.left ( float: left ; margine: 5px 15px 5px 0 ; altezza massima: 320px ; larghezza massima: 320px ; ) img .img.left :hover( trasforma: scala (2 ) traduce (70px , 30px ) ; transizione: tutti 0 . 3s lineare 0 )

E il CSS differisce solo nella posizione della miniatura (a destra) e nello spostamento a sinistra quando viene ingrandito:

img .img.right ( float: right ; margine: 5px 0 5px 15px ; altezza massima: 320px ; larghezza massima: 320px ; ) img .img.right :hover( trasforma: scala (2 ) traduci (-69px, 30px ); transizione: tutti 0 . 3s lineare 0 )

Ora visualizziamo una miniatura per il centro:

img .img.center ( margine: 5px automatico ; display: blocco ; altezza massima: 320px ; larghezza massima: 320px ; ) img .img.center :hover ( trasformazione: scala (2 ); transizione: tutto 0,3 s lineare 0,3 secondi;

Riassumiamo il CSS e aggiungiamo bellezza:

img .img.left ( float: sinistra ; margine: 5px 15px 5px 0 ; ) img .img.right ( float: destra ; margine: 5px 0 5px 15px ; ) img .img.center ( margine: 5px automatico ; display: blocco ; ) img .img ( altezza massima: 320px ; larghezza massima: 320px ; transizione: tutti 0 . 3s 0 lineari ; z-index: 1 ; bordo: 1px solido #EEE ; sfondo: #FFFFFF ; imbottitura: 5px ; ) img .img :hover ( cursore: puntatore ; box-shadow: 0 0 5px 5px #eee ; bordo: 1px solido #25A0E3 ; z-index: 10 ; transizione: tutti 0 . 3s lineari 0 . 3s ; ) img .img. sinistra :hover( trasforma: scala (2 ) traduce (88px , 30px ); ) img .img.right :passa il mouse( trasforma: scala (2 ) traduce (-88px , 30px ); ) img .img.center :passa il mouse ( trasforma :scala(2);

Ho ritardato lo zoom dell'immagine di 0,3 secondi. In modo che quando si sposta il mouse sull'immagine, questa non ingrandisca.

Esistono molti modi per ingrandire un'immagine su un sito Web. Esamineremo diversi modi per ingrandire le immagini senza utilizzare script aggiuntivi, utilizzando solo html e CSS.

Tali metodi ti consentono di visualizzare rapidamente l'originale, poiché non è previsto il caricamento aggiuntivo di script, tuttavia, se desideri aprire le immagini originali utilizzando script con bellissimi effetti o creare una galleria, ti consiglio di prestare attenzione ai seguenti articoli:

Ho fatto una digressione lirica, cominciamo.

Ingrandimento dell'immagine sul sito

Il vantaggio è che non è necessario creare una miniatura separata per l'immagine originale. C'è solo un'immagine coinvolta qui

Ingrandisce l'immagine sul sito quando si passa il cursore

Il primo e più semplice modo ingrandire l'immagine sul sito, consiste nell'aggiungere il seguente codice alla proprietà image tra i tag img:

onmouseover="this.style.width="larghezza dell'immagine originale in px (o auto)"" onmouseout="this.style.width="larghezza dell'immagine ridotta in px""

Cioè, quando passi una volta il cursore, l'immagine diventerà più grande.

Codice completo:

E l'ultimo è il modo più bello per ingrandire il passaggio del mouse utilizzando . Qui aggiungeremo una cornice e una descrizione all'immagine grande.
Codice:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

Descrizione dell'immagine.

Descrizione dell'immagine.

Ingrandisci l'immagine sul sito web facendo clic

Il metodo del clic per ingrandire l'immagine è simile al primo metodo del passaggio del mouse per ingrandire, ma invece del passaggio del mouse utilizzeremo onclick

Risultato:

Come puoi vedere, qui, per ingrandire l'immagine, devi cliccarci sopra, e se rimuovi il cursore, verrà ridotta automaticamente.

Nella prossima versione ingrandire l'immagine sul sito al clic utilizzeremo:

Qui, per ridurre l'immagine, cioè riportarla alle dimensioni originali, sarà necessario fare clic in un punto qualsiasi della pagina web.

Risultato:

Un'altra opzione da utilizzare è ingrandire l'immagine facendo clic sulla parte superiore del testo. Qui usiamo il seguente codice:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

Abbiamo esaminato diverse opzioni ingrandire l'immagine sul sito: dal più semplice al leggermente più complesso con utilizzando l'HTML E . Usane uno qualsiasi sui tuoi siti web senza script aggiuntivi.