Yes Chef Studio
By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
DenyAccept
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

Move elements at different breakpoints

A useful javascript snippet that lets you move elements to a new location at different breakpoints. Perfect if you can only have 1 instance of an element on the page but it needs to change position.
View Snippet

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():
View Snippet

Custom Text Selection Colour

When users highlight text on your webpage, you have a unique opportunity to enhance the visual feedback with custom colors that match your brand. The ::selection pseudo-element allows you to style the background and text color of the selected text:
View Snippet
View All Snippets