Last active
October 19, 2018 10:58
-
-
Save mledwards/ccb0e76ad31378ae735e5c50795211da to your computer and use it in GitHub Desktop.
SASS mixin for fading on hover of parent or child element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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