Com fer la transició de les propietats de 'visualització' + 'opacitat' CSS

Pas 2: configureu la propietat 'display'.

A continuació, accediu al contenidor div utilitzant el nom de la classe ' element principal ' i configureu el ' visualització ' propietat:

Aquí, el valor de la ' visualització La propietat s'estableix com a bloc ” per ocupar tota l'amplada de la pantalla.

Pas 3: afegiu una imatge de fons

A continuació, apliqueu les propietats CSS següents al contenidor div al qual s'accedeix:

Al fragment de codi indicat anteriorment:

• “ alçada ' i ' amplada ” Les propietats determinen la mida de l'element definit.
• “ imatge de fons ” La propietat CSS s'utilitza per inserir una imatge amb l'ajuda del “ url() ” funció a la part posterior de l'element.
• “ opacitat ” determina el nivell d'opacitat d'un element. El nivell d'opacitat demostra el nivell de transparència, on ' 1 ' s'utilitza per no transparència, i ' 0.5 ' és per ' 50% 'transparència.
• “ transició ” en CSS permet als usuaris canviar els valors de propietat sense problemes durant una durada determinada.
• “ marge ” defineix l'espai fora del límit definit al voltant d'un element.

Sortida

Pas 4: apliqueu el pseudoselector ':hover'.

Ara, accediu al contenidor div al llarg del ' : flotar ” pseudoselector que s'utilitza per seleccionar elements quan passem el ratolí per sobre d'ells:

A continuació, configureu el ' opacitat ” de l'element seleccionat com a “ 1 ” per eliminar la transparència.

Sortida

Es tracta de configurar les propietats de 'visualització' i 'opacitat' de CSS de transició.

Conclusió

Per establir les propietats de transició 'visualització' i 'opacitat', primer, feu un contenidor div utilitzant l'element