Paano Ilipat ang CSS 'display' + 'opacity' Properties

Hakbang 2: Itakda ang 'display' Property

Susunod, i-access ang div container sa pamamagitan ng paggamit ng pangalan ng klase ' pangunahing bagay 'at itakda ang' display ” ari-arian:

Dito, ang halaga ng ' display 'Ang ari-arian ay itinakda bilang ' harangan ” para sa pagkuha ng lahat ng lapad ng screen.

Hakbang 3: Magdagdag ng Larawan sa Background

Susunod, ilapat ang mga sumusunod na katangian ng CSS sa na-access na lalagyan ng div:

Sa snippet ng code na nasa itaas:

• “ taas 'at' lapad Tinutukoy ng mga katangian ng ” ang laki ng tinukoy na elemento.
• “ background-image 'Ang CSS property ay ginagamit para sa pagpasok ng isang imahe sa tulong ng ' url() ” function sa likod ng elemento.
• “ opacity Tinutukoy ng ” ang antas ng opacity para sa isang elemento. Ang antas ng opacity ay nagpapakita ng antas ng transparency, kung saan ' 1 ' ay ginagamit para sa walang transparency, at ' 0.5 'ay para sa' limampung% ' aninaw.
• “ paglipat ” sa CSS ay nagpapahintulot sa mga user na baguhin ang mga value ng property nang maayos sa loob ng isang partikular na tagal.
• “ margin ” ay tumutukoy sa espasyo sa labas ng tinukoy na hangganan sa paligid ng isang elemento.

Output

Hakbang 4: Ilapat ang ':hover' na Pseudo Selector

Ngayon, i-access ang div container kasama ang ' :hover ” pseudo selector na ginagamit para sa pagpili ng mga elemento kapag ini-hover namin ang mouse sa ibabaw ng mga ito:

Pagkatapos, itakda ang ' opacity ” ng napiling elemento bilang “ 1 ” para alisin ang transparency.

Output

Iyon lang ang tungkol sa pagtatakda ng transition CSS 'display' at 'opacity' na mga katangian.

Konklusyon

Para itakda ang transition na 'display' at 'opacity' na mga property, gumawa muna ng div container gamit ang