Focus By Demotion a use case for #CSS `:hover... > :not(:hover)`show more

An awesome CSS trick is to use :hover on... the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻show more

Why CSS Hover Effects Matters!🥰

Some hover states might be hurting your website's mobile... experience. On mobile, hover states gets stuck when users tap on them. This CSS media query fixes that: @ media (hover: hover) { .card:hover { opacity: 0.5; } } With that, the hover transitions will only apply for devices that actually supports hovering. If you found this one useful, follow for more. ❤️show more

Cards Hover Effect woth pure CSS and HTML 🚀🔥... Code in the comments 🧑‍💻show more

using CSS grid you can avoid width change in... the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨show more

"glowy hover effect" by Ines

CSSアニメーション使って、hoverに遊びを入れるの好き

details 🤌 :hover intention + safety triangles 🦺 .triangle... { pointer-events: none; } .toggle:hover .triangle { pointer-events: all; } .toggle:has(+ :popover-open) .triangle { scale: 0; } .toggle:is(:hover, :focus-visible) + aside { translate: 0 0; }show more

"ASCII Glitch Ripple Hover Effect" by Bastou

CSS Tip! ✨ Did you know you can animate... CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇show more

Hover effects for personal website 🎈

made only using css. no js listener used. took... me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.show more

this effect can be achieved using only css by... combining the :has() and :not() pseudo-classes: `.menu:has(.item:hover) .item:not(:hover) { filter: blur(8px); }` which simply means: when a menu has a hovered item, blur every item inside it that isn't being hoveredshow more

magnetic bento hover effect w/ css anchor positioning .bento... { li:hover article { anchor-name: --a; } .indicator { position-anchor: --a; inset: anchor(inside); transition: inset var(--dur) var(--ease); } }show more

Magnetic hover reveal