Come eseguire la transizione delle proprietà CSS 'display' + 'opacità'.

Passaggio 2: impostare la proprietà 'display'.

Successivamente, accedi al contenitore div utilizzando il nome della classe ' oggetto principale ” e impostare il “ Schermo ' proprietà:

Qui, il valore del “ Schermo La proprietà 'è impostata come' bloccare ” per occupare tutta la larghezza dello schermo.

Passaggio 3: aggiungi un'immagine di sfondo

Successivamente, applica le seguenti proprietà CSS sul contenitore div a cui si accede:

Nello snippet di codice sopra indicato:

• “ altezza ' E ' larghezza Le proprietà ” determinano la dimensione dell'elemento definito.
• “ immagine di sfondo ' La proprietà CSS viene utilizzata per inserire un'immagine con l'aiuto del ' URL() ” funzione sul retro dell'elemento.
• “ opacità ” determina il livello di opacità di un elemento. Il livello di opacità mostra il livello di trasparenza, dove ' 1 ” è usato per non trasparenza, e “ 0,5 ' è per ' cinquanta% “trasparenza.
• “ transizione ” in CSS consente agli utenti di modificare i valori delle proprietà senza problemi per una determinata durata.
• “ margine ” definisce lo spazio al di fuori del confine definito attorno a un elemento.

Produzione

Passaggio 4: applicare lo pseudo selettore ':hover'.

Ora, accedi al contenitore div lungo il ' : al passaggio del mouse ” pseudo selettore che viene utilizzato per selezionare gli elementi quando ci passiamo sopra con il mouse:

Quindi, imposta il ' opacità ” dell'elemento selezionato come “ 1 ” per rimuovere la trasparenza.

Produzione

Si tratta di impostare le proprietà CSS di 'visualizzazione' e 'opacità' della transizione.

Conclusione

Per impostare le proprietà di 'visualizzazione' e 'opacità' della transizione, creare innanzitutto un contenitore div utilizzando l'elemento