Question

我现在是Web开发人员的非常，我目前正在尝试将图像悬停在其上方时使其褪色。这就是我现在得到的：

    html:
         <body>
                <img src=imgmonochrome.jpg id=img1>
            </body>


    css:
        #img1 {
            position: top right;
            height:49%;
            width:49%;
            transition: content 0.5s ease;
        }
        #img1:hover {
            transition: content 0.5s;
            content: url('imgcolor.jpg');
        }

图像会切换，但不会淡入。

我一直在寻找有关此问题的答案，但找不到任何只使用HTML和CSS的答案（因为我对javascript / jQuery不了解（（由于这个原因，我将很快学习））））

我们将不胜感激。

Answer 1

是，这是可能的...但是从传统意义上讲不是。

要完成此操作，您需要放弃<img />，而要使用在 {{3}]中显示为 content: url() 的两个图像} 和 :before 伪类。将:before设置为起始图像，并将:after设置为目标图像。然后将:after的 :after 默认设置为0，并将两个伪元素设置为彼此重叠。最后，为:hover和:before设置:after规则以切换其opacity，并使用 opacity 控制渐变

这可以在下面看到：

* {
  margin: 0;
}

.image:before {
  content: url("https://via.placeholder.com/150/FF0000/00FFFF");
  transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
}

.image:after {
  position: absolute;
  left: 0;
  opacity: 0;
  content: url("https://via.placeholder.com/150/00FFFF/FF0000");
  transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
}

.image:hover:after {
  opacity: 1;
}

.image:hover:before {
  opacity: 0;
}

<div class="image"></div>

Answer 2

从过渡中删除内容，并使用img标签设置图片

<img src="imgmonochrome.jpg" id="img1">

        #img1 {
            position: top right;
            height:49%;
            width:49%;
            transition: 0.5s ease;
        }
        #img1:hover {
            opacity: 0.3;
            background: url(imgcolor.jpg);
        }

或者，

<img src="imgcolor.jpg" id="img1">
#img1 {
   filter: gray;
   -webkit-filter: grayscale(1);
   -webkit-transition: all .5s ease-in-out;
}
#img1:hover {
   filter: none;
   -webkit-filter: grayscale(0);
}

悬停时如何使图像褪色？

2 个答案: