Last active
March 3, 2021 01:51
-
-
Save iamravenous/5744e8a580fb0b22838d to your computer and use it in GitHub Desktop.
Highlight element on hover and fade all the same elements, except the current
This file contains hidden or 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
/* | |
* Highlight Element | |
* Highlight element on hover and fade all the same elements, except the current | |
* Recommended for use in galleries or in grids with many items or cards | |
* Author: Franco Moya - @iamravenous | |
*/ | |
var highlight = $('.grid-item'); | |
highlight.hover ( | |
/* On mouse enter */ | |
function() { | |
/* Highlight on hover */ | |
$(this).css('opacity', '1'); | |
/* Fade all the same elements, except the current */ | |
highlight.not(this).css('opacity', '.3'); | |
}, function() { | |
/* Restores all items on mouse leave */ | |
highlight.css('opacity', '1'); | |
} | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment