Hello, my name is JP.

CSS Sibling Fade

When implementing any interactive UI feature in web development there are always multiple ways to accomplish the task. The interactivity can be all JavaScript, a mixture of JavaScript and CSS, or only CSS.

As CSS features have advanced over the years it's pretty astounding how much you can accomplish, from an interactivity standpoint, with CSS alone. Anytime you can implement interactivity with pure CSS it is ideal as it's more efficient and less memory consuming.

The UI paradigm below is a fairly common one. Can be used for navigation bars, lists, and photo galleries like the example below. The beauty of the below implementation is that it's pure CSS, it's concise, and it's maintainable.

Enjoy!