CSS：将背景图像添加到：具有淡入淡出效果的伪元素之后

#gallery div::after {
    content: "";
    position: absolute;
    top: 0;
}
#gallery div:hover::after {
    background-image: url("files/img/plus.jpg") !important;
    background-repeat: no-repeat;
    height: 83px;
    right: 0;
    width: 83px;
    transition: background 1300ms ease-in 2s;
}
#gallery a:nth-child(1) div {
    background-image: url("files/img/bio/1.jpg");
    background-size: cover;
    height: 240px;
    position: relative;
    width: 240px;
}

I'm trying to add a fade effect to plus.jpg background-image, applied on the ::after pseudoelement on hover. As you can see I tried with transition: background 1300ms ease-in 2s but nothing is happening..

我正在尝试向plus.jpg background-image添加淡入淡出效果，应用于悬停时的伪后元素之后的:: after。你可以看到我尝试过渡：背景1300毫秒轻松2s但没有发生任何事情..

Here you can see the code live (is the gallery with 9 images.

在这里你可以看到现场代码（是有9个图像的图库。

2 个解决方案

#1

-1

Try this out.

试试吧。

#gallery div::after {
  content: "";
  position: absolute;
  top: 0;
  height: 83px;
  right: 0;
  width: 83px;
  transition: opacity 1300ms ease-in 2s;
  background-image: url("files/img/plus.jpg") !important;
  background-repeat: no-repeat;
  opacity: 0;
}
#gallery div:hover::after {
  opacity: 1;
}
#gallery a:nth-child(1) div {
  background-image: url("files/img/bio/1.jpg");
  background-size: cover;
  height: 240px;
  position: relative;
  width: 240px;
}

#2

-1

background-images can't be transitioned. But since it's just a simple plus sign, I suggest the ff:

背景图像无法转换。但由于它只是一个简单的加号，我建议ff：

#gallery div::after {
background-color: #ddaa44;
color: white;
content: "+";
display: block;
font: 44px/44px verdana;
opacity: 0;
padding: 26px;
position: absolute;
right: 0;
top: 0;
}

#gallery div:hover::after {
opacity: 1;
transition: all 0.2s ease-in-out 0s;
}

#1

-1