色调图像并在悬停时恢复正常

Question

我目前正在尝试为我正在处理的wordpress网站上的所有图片添加过滤器。滤镜在我的所有图像上都是蓝色叠加，然后一旦用鼠标悬停，图像将恢复正常。

按照各种教程，我最终使用了这段代码：

img.wp-post-image {
    /* -webkit-filter: grayscale(1); */
    display: inline-block;
    position: relative;
}

img.wp-post-image:after {
    content:'';
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: blue;
    opacity: 0.1;
}

img.wp-post-image:hover:after {
    opacity: 0;
    /* -webkit-filter: grayscale(0); */
    /* opacity: 0.6;
    filter:alpha(opacity=60); */
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

然而，这不是＆＃39;似乎一直在努力。我注释掉的代码（灰度效果）有效，但颜色叠加不是。有什么我做错了，或者我能用这种方法做什么工作？

由于