Code Snippets
Fade non-hovered links
Fade non-hovered links
A fun animation where hovering over links will fade out all the items except the hovered item.
<style>
.link-wrapper:has(.link-item:hover) .link-item {
opacity: 0.5
}
.link-item:hover {
opacity: 1 !important;
}
</style>
Similar Code Snippets
Calculate sizes in CSS
CSS's calc() function allows you to perform calculations to determine CSS property values. It's incredibly useful for responsive design, such as when you need to adjust sizes dynamically. For example, if you want a div to be 100% of the viewport width minus a certain margin, you can use calc():
Add query parameter value to hidden field
Pass through dynamic url values to your forms so you can track things like sales reps, traffic source, etc....
Get class name from element
A nice little script that will return the first class applied to an element. It's part of our internal slider code, but has lots of uses when other js libraries are involved.