How to Use CSS to Fade In and Fade Out HTML Text and Pictures

Believe it or not, this image of an adorable dog is fading in and out with only CSS and HTML (and then screen captured to put in this article). I’ll explain how.

If you have ever used video editing software — whether it’s Windows Movie Maker or Adobe Premiere Pro — then you are most likely familiar with the fade-in and fade-out video transitions. They’re extremely effective for creating a nice and polished feel, and there’s no reason why you shouldn’t be able to have that in your arsenal when you’re programming web applications.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tremaine Eto

Tremaine Eto

Senior Software Engineer @ Iterable | Previously worked at DIRECTV, AT&T, and Tinder | UCLA Computer Science alumni | Follow me for software engineering tips!