Css 悬停时对图像着色并恢复为正常

我目前正试图在我正在工作的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;
}

然而，这似乎根本不起作用。我注释掉的灰度效果代码工作正常，但颜色叠加不起作用。我有没有做错什么，或者我有没有办法让这一切顺利进行

---

谢谢

图像无法接收伪元素。您需要包装每个图像，并在包装上放置一个覆盖层。@Paulie_D-Hmm，因为我使用的是wordpress模板，我还能创建一个类来包装每个图像吗？我不在WP上。但是你真的需要覆盖层吗？也许组合使用滤镜会更好……一次可以使用多个滤镜。@Paulie_D我的真正目标是在网站上的所有图像上创建一个蓝色渐变。使用webkit过滤器，我无法在所有图像上实现标准颜色。我不完全确定我是否丢失了某种特定的代码来完成这项工作。你是想做类似的事情吗？