1. Customize
  2. Customizations
  3. Black and white effect on not earned achievements

Black and white effect on not earned achievements

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 .gamipress-achievement-image, .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 .gamipress-rank-image, .rank-wrap .gamipress-rank-image to make it works on ranks too:

.gamipress-achievement .gamipress-achievement-image, .achievement-wrap .gamipress-achievement-image,
.gamipress-rank .gamipress-rank-image, .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 .gamipress-achievement-image, .achievement-wrap .gamipress-achievement-image,
.gamipress-rank .gamipress-rank-image, .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 .gamipress-achievement-image, .achievement-wrap .gamipress-achievement-image,
.gamipress-rank .gamipress-rank-image, .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);
}

More information about CSS filter

Was this article helpful to you? Yes 1 No

How can we help?