Cum se face tranziția proprietăților CSS „afișare” + „opacitate”.

Pasul 2: Setați proprietatea „afișare”.

Apoi, accesați containerul div utilizând numele clasei „ element-principal ” și setați „ afişa ” proprietate:

Aici, valoarea „ afişa ” proprietatea este setată ca “ bloc ” pentru a ocupa toată lățimea ecranului.

Pasul 3: Adăugați o imagine de fundal

Apoi, aplicați următoarele proprietăți CSS pe containerul div accesat:

În fragmentul de cod menționat mai sus:

• „ înălţime ' și ' lăţime ” proprietățile determină dimensiunea elementului definit.
• „ imagine de fundal ” Proprietatea CSS este folosită pentru inserarea unei imagini cu ajutorul “ url() ” în partea din spate a elementului.
• „ opacitate ” determină nivelul de opacitate pentru un element. Nivelul de opacitate demonstrează nivelul de transparență, unde „ 1 ” este folosit pentru lipsă de transparență, iar „ 0,5 ' este pentru ' cincizeci% ” transparență.
• „ tranziție ” în CSS permite utilizatorilor să modifice fără probleme valorile proprietăților pe o anumită perioadă.
• „ marginea ” definește spațiul din afara graniței definite în jurul unui element.

Ieșire

Pasul 4: Aplicați pseudoselectorul „:hover”.

Acum, accesați containerul div de-a lungul „ :planare ” pseudoselector care este utilizat pentru selectarea elementelor când trecem mouse-ul peste ele:

Apoi, setați „ opacitate „ din elementul selectat ca „ 1 ” pentru a elimina transparența.

Ieșire

Acesta este totul despre setarea proprietăților de „afișare” și „opacitate” CSS de tranziție.

Concluzie

Pentru a seta proprietățile de tranziție „afișare” și „opacitate”, mai întâi, creați un container div folosind elementul