By default, GamiPress adds an opacity effect on not earned achievements images to notice users about the earned status of this achievements as you can see on next image:
A lot of sites want to change this opacity effect by a black and white one like:
Add this effect is so simple as add a single CSS rule:
.gamipress-achievement.user-has-not-earned .gamipress-achievement-image, .user-has-not-earned .achievement-wrap .gamipress-achievement-image {
opacity: 1 !important; /* Remove GamiPress opacity, remove this line if you want to keep opacity */
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}Black and white effect on ranks
To add this effect on ranks just is required to add the selector .gamipress-rank.user-has-not-earned .gamipress-rank-image, .user-has-not-earned .rank-wrap .gamipress-rank-image to make it works on ranks too:
.gamipress-achievement.user-has-not-earned .gamipress-achievement-image, .user-has-not-earned .achievement-wrap .gamipress-achievement-image,
.gamipress-rank.user-has-not-earned .gamipress-rank-image, .user-has-not-earned .rank-wrap .gamipress-rank-image {
opacity: 1 !important; /* Remove GamiPress opacity, remove this line if you want to keep opacity */
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}More effects
The CSS rule filter has other interesting effects like sepia and blur that can make your images looks incredible different like:
Sepia effect:
.gamipress-achievement.user-has-not-earned .gamipress-achievement-image, .user-has-not-earned .achievement-wrap .gamipress-achievement-image,
.gamipress-rank.user-has-not-earned .gamipress-rank-image, .user-has-not-earned .rank-wrap .gamipress-rank-image {
opacity: 1 !important; /* Remove GamiPress opacity, remove this line if you want to keep opacity */
-webkit-filter: sepia(100%);
filter: sepia(100%);
}Blur effect:
.gamipress-achievement.user-has-not-earned .gamipress-achievement-image, .user-has-not-earned .achievement-wrap .gamipress-achievement-image,
.gamipress-rank.user-has-not-earned .gamipress-rank-image, .user-has-not-earned .rank-wrap .gamipress-rank-image {
opacity: 1 !important; /* Remove GamiPress opacity, remove this line if you want to keep opacity */
-webkit-filter: blur(5px);
filter: blur(5px);
}