Image filter effects for WordPress blog theme Meteor

style.css

/* make sure there is no color in the image */
.section-portfolio-masonry .type-post .featured-image img {
-webkit-filter: grayscale(100%); 
filter: grayscale(100%);		
}
	
.section-portfolio-masonry .type-post .featured-image img:hover {
-webkit-filter: grayscale(0%); 
filter: grayscale(0%);		
}

/* credit article https://www.impressivewebs.com/image-tint-blend-css */

.section-portfolio-masonry .type-post .featured-image:after {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 -moz-transition: all .3s linear;
 -webkit-transition: all .3s linear;   
 -ms-transition: all .3s linear;
 -o-transition: all .3s linear;
 transition: all .3s linear;
 }
 
 .section-portfolio-masonry .type-post:first-child .featured-image:after,
 .section-portfolio-masonry .type-post:nth-child(6) .featured-image:after {background: rgba(255,0,0, 0.5);} /*red*/
 .section-portfolio-masonry .type-post:nth-child(2) .featured-image:after,
 .section-portfolio-masonry .type-post:nth-child(7) .featured-image:after {background: rgba(0,255,255, 0.5);} /* turquoise*/
 .section-portfolio-masonry .type-post:nth-child(3) .featured-image:after,
 .section-portfolio-masonry .type-post:nth-child(8) .featured-image:after {background: rgba(255,0,240, 0.5);} /* violet */
 .section-portfolio-masonry .type-post:nth-child(4) .featured-image:after,
 .section-portfolio-masonry .type-post:nth-child(9) .featured-image:after {background: rgba(255,102,0, 0.6);} /* orange */
 .section-portfolio-masonry .type-post:nth-child(5) .featured-image:after,
 .section-portfolio-masonry .type-post:nth-child(10) .featured-image:after {background: rgba(0,0,255, 0.5);} /* blue purple */