css - 颜色叠加 + 淡入淡出

Question

所以我有一个 tumblr 博客，我想对其进行设置，以便默认情况下所有图片帖子的顶部都有一种颜色(几乎透明)，然后当您将鼠标悬停在它上面时，它会完全淡出显示图像的原始颜色。

我一直在寻找正确的代码，但找不到任何工作。下面的代码成功地从灰度淡出，但我不想要灰度。我正在寻找可以让我添加纯色但透明，然后淡出的东西。有任何想法吗？ ;一个;

(img 是此 CSS 代码中用于 tumblr 图片的属性)

img {
    -webkit-filter: grayscale(100%);
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}
    
img:hover {
    -webkit-filter: grayscale(0%);
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

<img src="http://i0.kym-cdn.com/photos/images/original/001/285/460/8b6.jpg" width="300px"></img>

Answer 1

试试这个:https://jsbin.com/guyudiqafi/edit?html,css,output

HTML:

<div class="image-container">
  <img src="https://c.tadst.com/gfx/1200x630/sunrise-sunset-sun-calculator.jpg?1">
</div>

CSS:

.image-container {
  width: 300px;
  position: relative;
}

.image-container:after {
  background: #0043ff;
  opacity: 0.3;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: ' ';
  -webkit-transition: all 0.9s ease-in-out;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -ms-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
}

.image-container:hover:after {
  opacity: 0;
}

img {
  display: block;
  width: 100%;
}