如何在CSS元素中添加过渡

Question

当我将鼠标悬停在元素上时，我在元素上添加了一张图片，这是可行的，然后我添加了:

过渡:0.2秒;

它没有转换，为什么呢?我想让它轻松地融入画面，而不是立即显示出来。

请帮忙。

如果它有任何帮助，我使用content: url("图像位置");添加图片

Answer 1

如果我明白你需要什么，这将是类似的:

.picturehover {
  background-color: #f0f0f0;
  position: relative;
  height: 200px;
  width: 300px;
}
.picturehover:after {
  background: transparent url(https://lorempixel.com/300/200) center center / cover no-repeat;
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity .4s ease-in-out; 
}
.picturehover:hover:after {
  opacity: 1;
}

<div class="picturehover">Some text</div>

Answer 2

i make like this

.box{
  background:#333;
  width:100px;
  height:100px;
  transition:0.2s linear;
}
.box:hover{
  background:#ccc;
}

<div class="box"></div>