HTML

FADE IN & OUT HTML ELEMENTS

(quick & simple examples)

FADE ANIMATION #fadeA { transition: opacity 1s; } #fadeA.hide { opacity: 0; }

FADE ON MOUSE CLICK

01

CLICK TO TOGGLE FADE/OPACITY <p id="fadeA">Fade</p> <button onclick="document. getElementById('fadeA').classList.toggle ('hide')">Toggle</button>

FADE ON MOUSE HOVER

02

FADE ANIMATION fadeB { transition: opacity 1s; } #fadeB:hover { opacity: 0; }

HOVER TO FADE  <p id="fadeB">This will fade on hover.</p>

CSS-ONLY FADE

03

HIDE CHECKBOX #fadeC { display: none; }

USE CHECKBOX TO DRIVE FADE EFFECT <label for="fadeC">Click to fade.</label> <input type="checkbox" id="fadeC"> <p id="fadeD">This will fade.</p>

CHECKED > FADE  fadeD { transition: opacity 1s; } #fadeC:checked + #fadeD { opacity: 0; }