css - 如何在 CSS 元素中添加过渡效果？

Question

基本上，当我将鼠标悬停在某个元素上时，我在它上面添加了一张图片，这很有效，但随后我添加:

过渡:0.2s；

而且它没有转换，这是为什么？我希望它能够轻松融入画面，而不仅仅是立即出现。

帮助将不胜感激。

如果有任何帮助，我使用了 content: url("image location");添加图片。

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>