Come ingrandire un'immagine sul mouse del mouse usando CSS

Il CSS "transizione"La proprietà viene utilizzata per aggiungere effetti sui diversi elementi HTML, come la modifica della larghezza, dell'altezza, delle dimensioni e della posizione degli elementi. Utilizzando questa proprietà, puoi anche ingrandire un'immagine sul mouse con la combinazione di proprietà Transform e: hover Pseudo-Class Element.

Lo scopo di questo articolo è di insegnarti la procedura di zoom su un'immagine su un mouse. Quindi iniziamo!

Come ingrandire un'immagine sul mouse del mouse usando CSS?

IL "transizione" E "trasformare"Le proprietà dei CS vengono utilizzate per ingrandire un'immagine su un mouse del mouse. Prima di saltare nell'implementazione, discuteremo delle proprietà menzionate una per una!

Proprietà "Transizione" CSS

IL "transizione"La proprietà viene utilizzata per modificare il valore delle proprietà CSS come larghezza, altezza, opacità e trasformazione in un periodo di tempo specifico. È una proprietà stensa di altre quattro proprietà.

Dai un'occhiata alla sintassi della proprietà di transizione.

Sintassi

Transizione: Transition-Property Transition-Duration
DEAY TRASSIGNAZIONE TIMINAZIONE DI TRASSEZIONE

La descrizione delle proprietà sopra menzionate è riportata di seguito:

• Proprietà di transizione: Viene utilizzato per impostare la transizione verso qualsiasi proprietà CSS, come larghezza, altezza, opacità, trasformata e molti altri.

• durata della transizione: Viene utilizzato per regolare la durata della transizione.

• Funzione di transizione: Viene utilizzato per impostare la velocità della transizione.

• Transition-Delay: Specifica quando la transizione inizia o ritarda.

Proprietà "trasforma" CSS

Per la trasformazione 2D e 3D di elementi HTML, viene utilizzata la proprietà "trasformata" di CSS. Utilizzando questa proprietà, è possibile modificare la forma e le dimensioni degli elementi. Permette inoltre a un elemento di ruotare, inclinarsi e scala.

Sintassi

La sintassi del "trasformare"La proprietà è:

Trasformazione: nessuna | Funzioni di trasformazione

La descrizione della proprietà di trasformazione è riportata di seguito:

• nessuno: È usato per impostare alcuna trasformazione degli elementi.

• Funzione di trasformazione: Viene utilizzato per impostare la funzione della proprietà di trasformata come rote (), disgustoso (), traduzione () e scala (). Inoltre, la funzione scala () ridimensiona l'elemento in direzioni orizzontali e verticali.

Esempio 1: ingrandire un'immagine sul mouse

Per ingrandire un'immagine su un mouse, prima, aggiungi un'immagine nell'HTML, quindi applica l'effetto hover ad esso.

Passaggio 1: aggiungi l'immagine in div

Per ingrandire un'immagine sul mouse al mouse usando CSS, in primo luogo, aggiungeremo un'immagine in “div". Per fare ciò, utilizzare il tag e impostare l'origine dell'immagine come "Immagine.PNG " dentro il .

Html

Passaggio 2: Style Div

In CSS, useremo "div"Per accedere al Div che abbiamo creato in HTML, quindi impostare l'altezza del Div come"250px"E il colore di sfondo come"RGB (134, 240, 227)". Inoltre, regoleremo il bordo attorno al Div impostando la larghezza come "10px", stile come "cresta" e colore come "RGB (2, 141, 127)".

CSS

div
Altezza: 250px;
Background: RGB (134, 240, 227);
Bordo: 10px Ridge RGB (2, 141, 127);

Passaggio 3: impostare la posizione dell'immagine e applicare la proprietà "Transizione"

Nel passaggio successivo, impostare la posizione dell'immagine utilizzando l'imbottitura come "80px" e "160px". Useremo la larghezza come "150px"Per regolare le dimensioni dell'immagine. Successivamente, applica la proprietà di transizione all'immagine impostando il valore della proprietà di transizione come "trasformazione" e durata della transizione come "0s":

img
imbottitura: 80px 160px;
larghezza: 150px;
Transizione: trasformazione 0s;

Nota: i valori dell'imbottitura sono impostati come "80px"Rappresenta l'imbottitura dall'alto e dal basso e"160px"Indica l'imbottitura da sinistra e destra.

Passaggio 4: ingrandisci un'immagine usando la proprietà "trasforma" su hover

Ora useremo ".IMG: Hover"Per collegare l'immagine con l'elemento pseudo-Classe del mouse. Di conseguenza, il mouse verrà applicato all'immagine. Successivamente, per ingrandire un'immagine su mouse, utilizzare la proprietà di trasformata e imposteremo il valore della funzione di scala come "(1.9)"Per ridimensionare l'immagine in entrambe le direzioni orizzontali e verticali:

img: hover
trasformazione: scala (1.9);

Come puoi vedere che l'immagine viene ingrandita quando il mouse su di essa:

Passiamo all'esempio successivo, in cui ingrandiamo una gif su mouse hover.

Esempio 2: ingrandire una gif sul mouse

Innanzitutto, aggiungeremo una GIF nell'HTML usando il tag e specifichiamo la sua fonte GIF come "GIF.GIF":

Stuperemo il div come l'esempio precedente. Successivamente, imposta la posizione della GIF usando l'imbottitura come "50px" E "200px":

img
Pagging: 50px 200px;
larghezza: 150px;
Transizione: trasformazione 0s;

Successivamente, useremo "IMG: Hover"E imposta il valore della funzione di scala come"1.6":

img: hover
trasformazione: scala (1.6);

In tal modo, il GIF si zoom-in quando si supera il mouse:

Questo è tutto! Abbiamo discusso del metodo di zoom di un'immagine sul mouse del mouse.

Conclusione

Per ingrandire un'immagine su un mouse "Transizione" e "trasformazione" vengono utilizzate le proprietà dei CS. Innanzitutto, applica la proprietà di transizione sull'immagine e imposta il valore come trasformazione. Quindi nel ": Hover"Elemento pseudo-classe, utilizzare la proprietà trasforma e impostare il valore della funzione scala (). In questo manuale, abbiamo imparato il metodo per ingrandire un'immagine sul mouse del mouse usando CSS e fornirne esempi.