JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<div class="bcbox">
<a href="#" class="tokyo-popup"> <img alt="Tokyo Menu" class="bccustom tokyo-menu 1stheight bcbox1" src="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg"  /></a>
<div class="it-caption it-simple-caption red">
</div>

<div class="bcbox">
<a href="#" class="tokyo-popup"> <img alt="Tokyo Menus" class="bccustom tokyo-menu 1stheight bcbox1" src="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg"  /></a>
<div class="it-caption it-simple-caption red">
</div>

CSS

.bccustom {-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
}

.bcbox1 {width: 200px;}

JavaScript

$('div.bcbox img').attr('alt', function(index, value){
                var val = value.toLowerCase();
                return (val.charAt(val.length-1)=="s")?val.slice(0,-1): val;
            });

$("div.bcbox img[alt*='menu']").removeClass("bccustom");