颜色叠加+淡入淡出

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

您可以使用 CSS 伪元素 :after.

实现您想要的效果

查看文档：https://www.w3schools.com/css/css_pseudo_elements.asp

请参阅下面的工作示例：

.img-wrapper {
  position:relative;
  display: inline-block;
  width: 32%;
}
.img-wrapper img{
  width: 100%;
}

.img-wrapper:after {
  position:absolute;
  display: block;
  height: 100%;
  width: 100%;
  content: '';
  background-color: #ff0000;
  top: 0;
  left: 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;
 opacity: 1;
}
.img-wrapper.opacity:after {
  opacity: 0.3;
}
.img-wrapper.rgba:after {
  background-color: rgba(250,0,0,.3);
}
.img-wrapper:hover:after {
  opacity: 0;
}

<div class="img-wrapper">
  <img src="https://i.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
</div>
<div class="img-wrapper opacity">
  <img src="https://i.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
</div>
<div class="img-wrapper rgba">
  <img src="https://i.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
</div>

Answer 2

试试这个：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%;
}

颜色叠加+淡入淡出

Colour Overlay + Fade

css

overlay

colors

hover