jQuery BlackAndWhiteが利用できない

初めまして。
コーディング初心者で現在ホームページ作りをしているのですが、
画像マウスオーバー時に白黒からカラーを切り替えるプラグインのBlackAndWhiteを利用しようとしておりますが、うまくいきません。

念のためマウスオーバー前の画像を添付しておきます。

マウスオーバー前

このような形でマウスオーバー前はalt属性が左上に謎に表示された状態で、マウスオーバー後は白黒からカラーに変わるような動作はしますが、alt属性が消えるだけになります。画像自体は消えません。

恐縮ではございますが、お詳しい方ご教授いただけませんでしょうか？

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.BlackAndWhite.js"></script>
<script>
$(function() {
 $('.bwWrapper').BlackAndWhite({
        hoverEffect : true,
        webworkerPath : false,
        invertHoverEffect: false,
        intensity:1,
        speed: {
            fadeIn: 200,
            fadeOut: 800
        },
        onImageReady:function(img) {
        }
    });
});
</script>

#pnav li{
 display: inline-block;
 margin:50px 97px;
 width:300px;
 height:300px;
 text-align: center;
}

.bwWrapper{
 margin-top: 50px;
 position:relative;
  display: block;
}

    <nav id="pnav">
      <ul>
        <li><a href="service.html" class="bwWrapper"><img src="img/ser222.jpg" alt="pariss"/></a></li>
        <li><a href="service.html" class="bwWrapper"><img src="img/ser222.jpg" alt="paris"/></a></li>
      </ul>
    </nav>

一部抜粋ですが、現在このように記入しております。
一応jQueryはなんとなく反応はしていてブラウザ上では、alt属性が画像左上に表示されており画像をマウスオーバーするとalt属性が消えるような感じになっております。

恐縮ではございますが、ご教授お願いいたします。