Fading out siblings on hover in CSS

Here’s a tiny trick for making your hover states stand out, and also a cool way to target the siblings of the thing you’re hovering over. The effect is a mixture of two effects:
Scale the hovered item Fade out the siblings Card 1 Card 2 C…


This content originally appeared on Welcome to my blog on Trys Mudford and was authored by Welcome to my blog on Trys Mudford

Here’s a tiny trick for making your hover states stand out, and also a cool way to target the siblings of the thing you’re hovering over. The effect is a mixture of two effects: Scale the hovered item Fade out the siblings Card 1 Card 2 Card 3 .fade-out-siblings { --gutter: 2.5rem; background: var(--gradient-blue); text-align: center; grid-gap: var(--gutter); padding: var(--gutter); display: grid; margin: 2rem 0; pointer-events: none; } .


This content originally appeared on Welcome to my blog on Trys Mudford and was authored by Welcome to my blog on Trys Mudford


Print Share Comment Cite Upload Translate
APA
Welcome to my blog on Trys Mudford | Sciencx (2023-12-01T03:19:06+00:00) » Fading out siblings on hover in CSS. Retrieved from https://www.scien.cx/2019/04/18/fading-out-siblings-on-hover-in-css/.
MLA
" » Fading out siblings on hover in CSS." Welcome to my blog on Trys Mudford | Sciencx - Thursday April 18, 2019, https://www.scien.cx/2019/04/18/fading-out-siblings-on-hover-in-css/
HARVARD
Welcome to my blog on Trys Mudford | Sciencx Thursday April 18, 2019 » Fading out siblings on hover in CSS., viewed 2023-12-01T03:19:06+00:00,<https://www.scien.cx/2019/04/18/fading-out-siblings-on-hover-in-css/>
VANCOUVER
Welcome to my blog on Trys Mudford | Sciencx - » Fading out siblings on hover in CSS. [Internet]. [Accessed 2023-12-01T03:19:06+00:00]. Available from: https://www.scien.cx/2019/04/18/fading-out-siblings-on-hover-in-css/
CHICAGO
" » Fading out siblings on hover in CSS." Welcome to my blog on Trys Mudford | Sciencx - Accessed 2023-12-01T03:19:06+00:00. https://www.scien.cx/2019/04/18/fading-out-siblings-on-hover-in-css/
IEEE
" » Fading out siblings on hover in CSS." Welcome to my blog on Trys Mudford | Sciencx [Online]. Available: https://www.scien.cx/2019/04/18/fading-out-siblings-on-hover-in-css/. [Accessed: 2023-12-01T03:19:06+00:00]
rf:citation
» Fading out siblings on hover in CSS | Welcome to my blog on Trys Mudford | Sciencx | https://www.scien.cx/2019/04/18/fading-out-siblings-on-hover-in-css/ | 2023-12-01T03:19:06+00:00
https://github.com/addpipe/simple-recorderjs-demo



Related Posts