Question

#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;
}

我尝试向plus.jpg background-image添加淡入淡出效果，并应用于::after上的hover伪元素。正如您所看到的，我尝试了transition: background 1300ms ease-in 2s但没有发生任何事情......

Here您可以看到实时代码（是包含9张图片的图库。

Answer 1

试试这个。

#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;
}

Answer 2

背景图片无法转换。但由于它只是一个简单的加号，我建议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;
}

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

2 个答案: