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

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

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..

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

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

Answer 2

background-images can't be transitioned. But since it's just a simple plus sign, I suggest the 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;
}