Skip to content

Instantly share code, notes, and snippets.

@mledwards
Last active October 19, 2018 10:58
Show Gist options
  • Save mledwards/ccb0e76ad31378ae735e5c50795211da to your computer and use it in GitHub Desktop.
Save mledwards/ccb0e76ad31378ae735e5c50795211da to your computer and use it in GitHub Desktop.
SASS mixin for fading on hover of parent or child element
/*
* Adds fade on hover of an element or a specified child element
*/
@mixin hover-fade($child: '') {
@if $child != '' {
#{$child} {
transition: opacity 0.33s linear;
}
} @else {
transition: opacity 0.33s linear;
}
&:hover #{$child}, &:focus #{$child} {
opacity: 0.7;
}
}
/* Usage for fading parent element on hover */
a {
@include hover-fade();
}
/* Usage for fading child element on hover */
.tile {
@include hover-fade('.image');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment