Trys Mudford avatar Trys Mudford

Fading out siblings on hover in CSS

Screenshot of “Fading out siblings on hover in CSS”

Trys here shows a nice little CSS trick to make hovered elements pop out (quite easy), while diming the siblings (that's the trick). Well done!


  1. screenshot of Our web design tools are holding us back

    Vasilis van Gemert

    Our web design tools are holding us back

    nowadays we can build things with CSS that are impossible to create with our design tools. We have scroll-snap, we have complicated animations, we have all kinds of wonderful interaction, grid, flexbox, all kinds of shapes, and so much more that you won’t find in the drop down menus of your tool of choice. Yet our websites still look and behave like they were designed with photoshop.

  2. screenshot of Layout & Grid in Design Systems

    Brad Frost avatar Brad Frost

    Layout & Grid in Design Systems

    This interdisciplinary disconnect around grid’s mental model affects how teams execute grid. In a broken, unidirectional, “developer handoff” process, design comps are treated as sacrosanct, and developers see that 12-column semi-transparent pink guideline as a hard requirement that must implemented exactly as articulated by the static design tool. This is how a “how to do a 12-column grid in HTML/CSS?” Google search ultimately led to massive success for tools like Bootstrap. Despite the introduction of many new CSS technologies and layout techniques over many years, this antiquated 12-column mental model still dominates a lot of conversations around layout and grid.