Hur man övergår CSS 'display' + 'opacitet' egenskaper

Steg 2: Ställ in egenskapen 'display'.

Gå sedan till div-behållaren genom att använda klassnamnet ' huvudartikel ' och ställ in ' visa ' fast egendom:

Här är värdet av ' visa ' egenskapen är inställd som ' blockera ” för att ta upp all skärmbredd.

Steg 3: Lägg till bakgrundsbild

Tillämpa sedan följande CSS-egenskaper på den åtkomliga div-behållaren:

I ovanstående kodavsnitt:

• ' höjd ' och ' bredd ” egenskaper bestämmer storleken på det definierade elementet.
• ' bakgrundsbild ' CSS-egenskapen används för att infoga en bild med hjälp av ' url() ”-funktion på baksidan av elementet.
• ' opacitet ” bestämmer graden av opacitet för ett element. Opacitetsnivån visar transparensnivån, där ' 1 ' används för ingen insyn, och ' 0,5 ' är för ' femtio% ”transparens.
• ' övergång ” i CSS tillåter användarna att ändra egenskapsvärden smidigt under en given varaktighet.
• ' marginal ” definierar utrymmet utanför den definierade gränsen runt ett element.

Produktion

Steg 4: Använd ':hover' Pseudoväljare

Gå nu till div-behållaren längs ' :sväva ” pseudoväljare som används för att välja element när vi håller musen över dem:

Ställ sedan in ' opacitet ' för det valda elementet som ' 1 ” för att ta bort insynen.

Produktion

Det handlar om att ställa in 'display' och 'opacitet'-egenskaper för övergångs-CSS.

Slutsats

För att ställa in övergångsegenskaperna 'display' och 'opacitet', gör du först en div-behållare med hjälp av